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

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

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

בחירת צבעים וגרפיקה - הצבעים בעיצוב מהווים חלק מרכזי בעיצוב האתר, והתאמת צבעים נכונה או שגויה יכולה להרים או להפיל עיצוב. בבחירת הצבעים שלנו לאתר עלינו ראשית לברר האם לתחום/מוצר/שירות שאנחנו מעוניינים להציג קיימת כבר ערכת צבעים (פאלטה/סכימה) מסוימת. כאמור, זהו אחד השלבים החשובים בעיצוב כיוון שהעין האנושית מתחברת לשילובי צבעים מסוימים וקיימת חשיבות למשחק בין צבעים מנוגדים או שכנים. הנה קישור לתוכנה שיכולה לסייע בגיבוש סכימת הצבעים של האתר - http://www.coffeecup.com/color-schemer . שילובי הצבעים שאנחנו מתחברים אליהם באופן טבעי הם השילובים הקיימים בטבע. חיבור נוסף הוא בין צבעים מנוגדים (כחול וכתום לדוגמא הוא שילוב פופולרי של שני צבעים מנוגדים).

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

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

פונקציונליות, נגישות וקידום - אמרנו כבר שעיצוב טוב הוא כזה שגם מתייחס לשיקולים פונקציונליים ותכנותיים של האתר. הדוגמא הבולטת ביותר לכך היא אתרי פלאש שמצטיינים באסתטיקה ומושכים את העין בצבע ובתנועה אבל מקשים מאוד על קידום האתר כיוון שהם כוללים תכנים לא טקסטואליים שלא נגישים למנועי חיפוש. בנוסף, העיצוב גם חייב לכלול מקומות בהם גולש יוכל לקבל אינפורמציה באופן מהיר ונגיש מבלי לעבור מספר חלונות עד שהוא יוכל להגיע ליעדו. חלק זה של העיצוב קשור לתחום עיצוב ממשק משתמש (עיצוב GUI) עליו תוכלו ללמוד בקישור הבא. נגישות העיצוב מתייחסת לשני תחומים מרכזיים - נגישות של גולשים בעלי מוגבלויות ונגישות תכנותית. שני הנושאים האלו הולכים הרבה פעמים יחד. דוגמא לעיצוב לא נגיש הוא עיצוב בו הפונט קטן באופן חריג, או שהוא נמצא על רקע בצבע הדומה לפונט ולכן קשה לקריאה. בנוסף, נגישות היא גם תיוג נכון של התמונות באתר באופן שבו עיוורים או דפדפנים שלא מציגים תמונות יוכלו להבין אילו תכנים קיימים באתר. אתר נגיש הוא גם אתר אופטימלי יותר למנועי חיפוש. תוכלו לקרוא עוד על נגישות באתר נגיש - http://www.nagish.org.il. לקריאה אודות עקרונות פיתוח אתרים ובניית אתר תדמית בקרו בקישור הבא.

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