עיצוב אתרים - הערות וטיפים כלליים לעיצוב אתר אינטרנט 

עיצוב אתרים - הערות וטיפים כלליים לעיצוב אתר אינטרנט

מספר דברים חשובים שיש לעשות עוד לפני שמתחילים את בעבודה על המחשב:

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

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

• לשבת עם הלקוח ולאפיין את האתר. צריך להבדיל בין מה שהלקוח רוצה לבין מה שהוא באמת צריך. לא תמיד הלקוח יודע מה הוא צריך.

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

• לבדוק אם יש ללקוח לוגו קיים. להציע במידה ואין. רצוי שהאתר יעוצב בשפה ובצבעים הדומים ללוגו.

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

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

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

• הלוגו צריך לשבת במקום בולט וקבוע אך לא משתלט ואף צנוע.

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

• פונטים צריכים להיות עקביים. לא מומלץ להשתמש ביותר מ-2 סוגי פונטים. כנ"ל לגבי גדלי פונטים - 2 גדלי פונטים מספיק.

• צבעים לטקסטים - שוב, לא יותר מ- 2-3 צבעים לטקסט רץ, כותרות משנה, כותרות ראשיות.

• בר ניווט המציין באיזה דף הגולש נמצא בשלב זה, לדוגמה: דף ראשי > כתבות > הסיפור שלי

• בר ניווט המראה לי באיזה עמוד אני נמצא או באיזה מספר תמונה אני. לדוגמה: 1,2,3,4,5,6

• גודל האתר צריך להיות בגודל מתאים למסך ממוצע. כיום יש הרבה בעלי מסך של 17 אינצ' אך הרבה גם עברו למסכים של 22 אינצ' ואף יותר. כך שניתן לעצב את גודל האתר בגודל של 900x700 פיקסל ולסמוך שרוב האנשים יראו את כל האתר חוץ מכאלה שעדיין עם מסכים של 14 אינצ' או לפטופים.

• בדף הבית מומלץ להשתמש בתמונה מפתה ומעניינת. הרי ידוע שתמונה אחת שווה אלף קליקים.

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

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

• יש להשתמש בתמונות ברזולוציה נמוכה - 72 ppi - זו רזולוצית המסך. אין טעם להשתמש ברזולוציה גבוהה יותר מה שיגרום לתמונות כבדות, מה שיגרום לאיטיות בהעלת הדף לאויר. (מומלץ בחום להשתמש באפשרויות המתקדמות של תוכנת הפוטושופ של שמירה לאינטרנט - save for web & devices).

• אם נרצה להשתמש בתמונות עם רקע שקוף בדף html, נשמור אותן בפוטושופ בשמירה לאינטרנט בפורמט png24. שימו לב, פורמט זה לא נתמך ע"י דפדפני אקספלורר 6 ומטה והתוצאה תהיה לא יפה. לפלאש אין שום בעיה לייבא תמונות בפורמט זה. אם אין בתמונה חצאי שקיפויות כמו הצללה או הילה מסביב, ניתן לשמור בפורמט gif שיעשה את העבודה.

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

• צבעים - רצוי להשתמש בצבעים בטוחים לאינטרנט. בחלון בורר הצבעים של הפוטושופ ניתן לסמן את האפשרות Only Web Colors ואז סקאלת הצבעים האפשריים תצטמצם מאוד אך לפחות נדע שהצבע שאנו רואים על המסך שלנו דומה לצבע שעל מסך של אחר. מאמר מורחב בנושא צבעים בטוחים לאינטרנט תוכלו למצוא כאן: http://www.lynda.com/resources/webpalette.aspx

טבלה של כל 216 הצבעים הבטוחים ושמותיהם ניתן למצוא כאן: http://www.web-source.net/216_color_chart.htm

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

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

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