בהמשך ישיר להעברת המסר המיתוגי והחיבור ללקוח הפוטנציאלי דרך הטקסט והתוכן באתר,
בפרק זה נדבר על המרכיב המרכזי שהופך אתר למצויין או… פחות- העיצוב.
בעולם הדיגיטלי יש חשיבות גדולה לשפה הויזואלית. העברת מסרים דרך חוש הראייה היא אמנות ותורה בפני עצמה, בפרק זה ננסה לגעת בדגשים שחשוב לשים לב אליהם כשמדובר בבניית אתר מוצלח עם שפה ויזואלית חזקה.
איך מתחילים?
עיצוב גרפי לאתר שונה מעיצוב פשוט לפרסום או לפרינט, מאחר והוא מכיל בתוכו מרכיבים רבים.
תפקידם של העיצוב והגרפיקה הוא משולב- מצד אחד להקל על חווית המשתמש וליצור אתר נעים ונוח לשימוש שבו ההנעה לפעולה מודגשת בצורה ויזואלית מדויקת. מהצד השני, העיצוב והגרפיקה אחראים להעביר את המסרים הסמויים והחשובים ביותר- אמינות, יצירתיות, נהנתנות, יוקרתיות ועוד.
בפרק זה נפרט על כל המרכיבים המשמעותיים שיעזרו לנו ליצור שפה ויזואלית חזקה לאתר שלך:
שנתחיל?
בניית שפה ויזואלית
בדומה לפרק הקודם בו עסקנו בשאלה- מי העסק שלי ואיך הוא מדבר?
כאן נשאל את עצמנו- מי העסק שלי ואיך הוא נראה?
כדי להתאים את עצמנו לקהל היעד בצורה אופטימלית, וליצור אתר שמדבר את המסר המרכזי שנרצה להעביר ללקוחות הפוטנציאליים שלנו- אנחנו צריכים שפה ויזואלית חזקה.
השפה הויזואלית באתר בנויה מכמה אלמנטים שחשוב מאוד שיתמכו אחד את השני-
צבעוניות, פונטים, תנועה וכו'.
אם ננסה להסביר את עצמנו על דרך השלילה, כשאתם פוגשים אתר לא טוב מבחינה עיצובית, כנראה שמשהו בשילוב של המסר, הצבעים, הכיתוב, התנועה באתר והשילוב של התמונות- לא מתכתב אחד עם השני בצורה טובה.
עוד לפני העבודה של איש המקצוע, חשוב מאוד שתבינו את הכיוון שאליו תרצו לשאוף מבחינת השפה הויזואלית.
זה הזמן לשאול את עצמכם שוב, והפעם בהתמקדות עיצובית:
- מי הלקוחות שלי ואיך הייתי מגדירה אותם?
- מה הדבר שהלקוחות שלי הכי מעריכים/ הכי צריכים?
- אם העסק שלי היה אדם, איך הוא היה מתלבש לקראת הרצאה מול קהל היעד הזה?
לאחר שנבין קצת יותר לעומק את אופי העיצוב והשפה הויזואלית הטובה ביותר לאתר שלנו,
ננסה להסתכל ברפרנסים של אתרים אחרים בתחום ולנתח את מה שאנחנו רואים:
- האם הקווים עגולים או חדים?
- האם יש תנועה באתר ומה אופיה (קופץ, רך, סטטי)
- כיצד הם מדגישים את המסר שלהם? באופן דוחף או מבין השורות?
- כיצד בחרו להשתמש בצבעים באתר? (צבעוניות שקטה או רועשת, צבעים רכים או חזקים)
כתבו לעצמכם את המסקנות ונסו לחשוב ממעוף הציפור- איך תראה השפה הויזואלית באתר שלכם?
אחרי שהבנו את הבסיס, אנחנו מוכנים להתקדם לעיצוב הפרקטי.
עיצוב באנרים או סליידרים
לאחר שבנינו את השפה הויזואלית, נוכל לעצב את הכלים הויזואליים שנמצאים באתר בהתאם.
ישנן אופציות רבות להצגת תמונות, גרפיקות ותוכן ויזואלי על גבי האתר, וזה בדיוק הזמן בו אנחנו נבחר את האופציות הנכונות ביותר לאתר שלנו בשקלול של שני הפרקים הקודמים והפרק הנוכחי: נתייחס למבנה האתר שהכנו בפרק הראשון, בשילוב עם הטקסטים והתוכן שהכנו בפרק השני ובהתאם לשפה הויזואלית שבנינו ממש עכשיו-
נוכל לבחור בצורה המדויקת ביותר את הכלים הויזואליים שנציג באתר.
עיצוב אייקונים
השימוש באייקונים יכול להקל את חווית המשתמש ועובד בעצם על האינסטינקט הויזואלי שקיים בכל אחד מאיתנו.
גם בבחירת העיצוב ממנו מורכבים האייקונים וגם בבחירת המיקום ותדירות השימוש בהם נתחשב בשלב הראשון בפרק זה ובעצם ננסה בכל פעם לדלג בין המיקרו (האייקונים והמסר הספציפי שהם אמורים להעביר) למאקרו (השפה הויזואלית באתר והמסר הכולל שהיא אמורה להעביר).
הגדרות צבעים
בחירת הצבעים לאתר הוא שלב חשוב במיוחד המשפיע באופן קריטי על הנראות הכוללת של האתר ועל המסר הויזואלי שאנחנו מעבירים.
אנחנו ממליצים לבחור פלטה של 3 צבעים, כאשר נשייך כל צבע לכותרות, הדגשות ועיצוב רץ.
בשלב זה נבחר את הדומיננטיות של כל צבע בעיצוב האתר, תוך התחשבות בשפה הויזואלית שבנינו בתחילת פרק זה.
ניתן להעזר גם כאן ברפרנסים מאתרים שאהבתם (או לא אהבתם), וכדאי לנסות 'לשחק' עם שילוב הצבעים כדי להבין איזה שילוב הוא הנכון ביותר ובאיזו רמת דומיננטיות נרצה שכל צבע יופיע.
פונטים וכותרות
שלב זה הוא ההמשך המתבקש של השלב הקודם, וגם הוא חשוב וחיוני לזרימה הויזואלית באתר ולמסר הויזואלי אותו אנחנו מעוניינים להעביר.
אנחנו ממליצים לבחור 2 פונטים עיקריים, כאשר פונט אחד מתייחס לכותרות וכפתורים ופונט אחד מתייחס לכותרות משניות ולטקסט רץ. המלצה נוספת שיכולה לשנות מקצה לקצה את נראות הטקסט היא ריווח (או הצמדה) של האותיות/ השורות, ושימוש בהדגשה או אפקטי טקסט כשיש צורך.
תמונות אווירה ומוצר
בשלב הזה כמובן חשוב להביא את התמונות הרלוונטיות לשירות או המוצר/ים…
במידה ויש תמונות שלכם של המוצרים ו/או השירותים הספציפיים זה כמובן עדיף כי זה ישדר את האותנטיות – ואת הייחודיות של השירות/מוצר הספציפי שלכם.
כמו כן – במידה ואין לכם תמונות רלוונטיות – תוכלו למצוא מגוון גדול מאוד של תמונות, אם תמונות אווירה – ואם תמונות של שירות ספציפי, במאגרי התמונות הרבים שקיימים ברשת לנושא זה במיוחד.
אנחנו ממליצים לבדוק את הקישורים במאמר הזה – שנותן קישורים למאגרים הנפוצים הקיימים.
פסי הפרדה וריווח
אלו אלמנטים שנוטים להישכח, בדרך כלל נזכרים בהם כשמסתכלים על האתר ואומרים 'חסר לי כאן משהו…'
פעמים רבות כשהמעצב אינו מנוסה בעיצוב אתרים, לא מתבצע ריווח נכון בין התכנים שבאתר. חשוב לזכור כי האתר זקוק לרווחים, על מנת לא להראות כמו כמות מסוימת של בלוקים דבוקים יחדיו. בשלב זה, נמצא את האיזון האידיאלי בין התוכן להפוגה.
אפקטים ורקעים
הטאצ'ים הסופיים שנבצע בעיצוב האתר חשובים במיוחד ומשפיעים באופן סמוי על האופן בו נתפוס את האתר ועל המסר שהאתר מעביר.
בהתאם לשפה הויזואלית שעיצבנו נתאים את האפקטים באתר ונחליט האם האתר יהיה סטטי או שתהיה בו תנועה? האם התנועה תהיה רכה ועדינה או תזזיתית וקופצת?
כמו כן, נחליט על שימוש בטקסטורות או בתמונות במקומות מסוימים באתר כרקע. גם כאן חשוב שתהיה הלימה מושלמת בין השפה הויזואלית והמסר שאנחנו רוצים להעביר לבין העיצוב בפועל ומה שהוא משדר.
התייחסות לגדלי מסכים ומובייל
חשוב לזכור שאנשים הולכים לצפות באתר שלכם בגדלים שונים – ממסכים גדולים של חדרי ישיבות ועד למסכים קטנים של מכשירי סלולר.
התחום הזה בגדול נקרא "רספונסיביות" והוא מתייחס למתודיקה שאליה מתיחסים בהתאמת האתר לגדלי המסכים השונים – וכמובן בימינו יש המון משמעות במיוחד לנראות האתר במסכים סלולריים.
אחד ההבדלים המשמעותיים ביותר בהתאמת האתר למסכים סלולריים – הוא ההבדל הפיזי שאת מסך הסלולר אנחנו בדר"כ מחזיקים לגובה במצב פורטרייט – ולעומת זאת – מסך המחשב כמעט תמיכה מונח אופקי/לרוחב – ולכן אלמנטים רבים שנראים יפה שהם מתוחים לרוחב המסך במחשב – לא יקבלו את אותו אפקט כשיופיעו במסכים סלולריים – כי למרות שיופיעו לכל הרוחב – לא יהיה להם הגובה המתאים/הרלוונטי – ולכן יהיה צורך או לחתוך חלק מהתמונה – כדי שיהיה במימדים פורטרטיים – או לבצע התאמה אחרת – כדי שמה שהתאים לתצוגה פנורמית יראה יפה במצב פורטרייט – ולהפך.
לסיכום
עיצוב אתר הוא מסע בפני עצמו, וחשוב להשקיע בו משאבים ומחשבה ככל הניתן.
ריכזנו עבורכם מספר טיפים שיעזרו לכם לקראת הליך עיצוב האתר:
- יצירתיות – נסו לחשוב על צבעים, צורות או כל דבר אחר שמזכיר לכם את העסק או השירות שלכם.
- עקביות –נסו לחשוב על אלמנטים מחברים בין עיצובי העמודים או הפוסטים שלכם.
- מעורבות – השתדלו להיות מעורבים בתהליך עיצוב האתר או הלוגו שלכם.
- הצעות – הקשיבו למספר הצעות, ונסו לקחת את הטוב מכל אחת.
- לא להסחף – אל תגזימו בכמות הצבעים המתארים את עסקכם. כבר אמרנו ששפה ויזואלית אחידה היא חשובה.
- פתיחות – הקשיבו לעצות המומחים, אל תנעלו על רעיון אחד ויחיד.
- קביעות – היו בטוחים כי אתם מרוצים מהעיצוב אותו אתם מקבלים, הוא עשוי להישאר עמכם זמן רב.
HE 
EN