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

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

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

נשמע לכם סינית?

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

נסו לנחש מה יכול לגרום לתמונה הזו להפוך להיות רב מימדית (היייי, בלי להכנס לאתר!! )

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

מתחילים להבין מה הכוונה ברב מימדיות, בדינמיות?

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

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

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

שימו לב, לא לכל האלמנטים יש קישור ולכן לא עבור כולם תראו את אותם האפקטים.

נחמד, נכון? הכל טוב ויפה, אבל מה קורה בניידים?

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

בנינו סליידר מיוחד עבור ניידים. בסליידר הזה פריסת האלמנטים מותאמת לרוחב המסך של ניידים.

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

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

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

והנה לכם הסליידר חיי ובועט – כפי שמוצג במסכי מחשב:

[rev_slider alias="naama-final"]

כפי שמוצג בניידים (שימו את העכבר \ אצבע על הסליידר):

[rev_slider alias="naama-mobile"]

סימני דרך – הבלוג של נעמה מגשימת מתנות