מדריך עיצוב אתרים

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

יחס בין חומרים ויזואלים לטקסטים

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

בחירת הצבעים

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

בחירה עודפת של פונטים

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

הקפדה על גריד ואלמנטים קבועים בדפי האתר

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

עימוד נכון של האתר

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

הימנעות מצפיפות

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

משקל התמונות והקבצים באתר

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

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

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

השפעה מסויימת על הדירוג במנועי החיפוש – אתר מהיר מדורג גבוה יותר מאתר איטי.

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

התאמת העיצוב לקהל היעד

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

שמירה על הרמוניה

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

עיצוב תומך בתוכן ולא להיפך

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

הקפדה על נהירות בניווט באתר (בהתאם לקהל היעד)

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

עיצוב אתרים מקצועי

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