דף ראשי > קורס גרפיקה ממוחשבת > טיפים לעיצוב אתר אינטרנט - עיצוב אתרים

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

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

1. 
   לתקשר עם הלקוח ולהבינו, להבין את סוג השרות/מוצר שהלקוח נותן וללמוד את התחום במידה ואין ידע מוקדם) להיכנס לאתרים ברשת המתעסקים באותו תחום, אתרים מהארץ ומחו"ל. להתרשם מהעיצוב שלהם, מהתוכן, איזה סוגי אתרים המתחרים מציעים, אתר הבנוי html , אתר פלאשי, פורטל, חנות מקוונת.
2. 
   לשבת עם הלקוח ולאפיין את האתר. צריך להבדיל בין מה שהלקוח רוצה לבין מה הוא צריך באמת. לא תמיד הלקוח יודע מה הוא צריך. יש לאפיין את האתר ע"י מספר שלבים: להחליט איזה סוג האתר, אתר פלאשי בעל אנימציות ומעברים יפים בין המסכים על חשבון חיפוש של גוגל, אתר html סטטי פשוט המותאם לחיפוש של גוגל אך לא ניתן לעדכון, אתר בעל מערכת ניהול תוכן הניתן לעדכון הלקוח גם אם אין לו שמץ בבניית אתרים.
3. 
   לבדוק אם יש ללקוח לוגו קיים. להציע במידה ואין. רצוי שהאתר יעוצב בשפה ובצבעים הדומים ללוגו.
4. 
   להחליט מה יהיה תוכן האתר. אלו קטגוריות, האם יש תת קטגוריות, כמה דפים יש, אלו סוגי גלריות ובאזו צורה הם נפתחות, האם יש חלון מבצעים, חלון חדשות, שדה טקסט לחיפוש, באנר שיווקי, תמונה מפתה בדף הראשי, טקסט קצר ומסביר, פתיח מרשים לפני כניסה לאתר, טופס יצירת קשר, אזור הנעה לפעולה וכו'.
5. 
   הניווט באתר צריך להיות פשוט וברור, כך שגם האדם שרק למד לגלוש יוכל להתמצות באתר. היות ואי הבנה לאן הולכים ומה עושים עכשיו ואיך חוזרים לדף הקודם, יגרום לגולש לנטוש את האתר:
6. 
   הלוגו צריך לשבת במקום בולט וקבוע אך לא משתלט ואף צנוע.
7. 
   קביעות. חייבת להיות קביעות באתר. אם התפריט נמצא בחלק העליון של האתר, הוא צריך להיות למעלה בכל הדפים ולא יכול לזוז פתאום לחלק התחתון. מה שיגרום למצב שצריך לחפש איפה הכפתורים בכל פעם. הגולש צריך להתרגל שלכפתורים מיקומים קבועים. אלא אם כן האופי של האתר פרוע ובא לשדר חופש, אמנות, שוני וגם אז רצוי להרגיל את הגולש לסדר כלשהו באי סדר.
8. 
   רצוי שתפריט לא יכיל יותר מתת קטגוריה אחת.
9. 
   פונטים צריכים להיות עקביים. לא מומלץ להשתמש ביותר מ-2 סוגי פונטים. כנ"ל לגבי גדלי פונטים – 2 גדלי פונטים מספיק.
10. 
    צבעים לטקסטים – שוב, לא יותר מ- 2-3 צבעים לטקסט רץ, כותרות משנה, כותרות ראשיות.
11. 
    בר ניווט המציין באיזה דף הגולש נמצא בשלב זה, לדוגמה:  דף ראשי > כתבות > הסיפור שלי
12. 
    בר ניווט המראה לי באיזה עמוד אני נמצא או באיזה מספר תמונה אני. לדוגמה: 1,2,3,4,5,6
13. 
    גודל האתר צריך להיות בגודל מתאים למסך ממוצע. כיום יש הרבה בעלי מסך של 17 אינצ' אך הרבה גם עברו למסכים של 22 אינצ' ואף יותר. כך שניתן לעצב את גודל האתר בגודל של 900x700 פיקסל ולסמוך שרוב האנשים יראו את כל האתר חוץ מכאלה שעדיין עם מסכים של 14 אינצ' או לפטופים.
14. 
    בדף הבית מומלץ להשתמש בתמונה מפתה ומעניינת. הרי ידוע שתמונה אחת שווה אלף קליקים.
15. 
    לא מומלץ לשפוך טקסט בדף הבית, היות והוכח שהגולש לא אוהב לקרוא טקסטים באתרים כאשר הוא מחפש משהו. הגולש לא קורא, הוא מרפרף, הוא סורק את האתר עם העיניים וממשיך הלאה. לכן 3-4 משפטים קצרים יספיקו לתאר את השרות אותו האתר מציע.
16. 
    כאשר כן יש שימוש בטקסט ארוך באתר כמו בדף מאמרים למשל, לא רצוי ליצור שורות ארוכות מדי מקצה לקצה בהן הגולש יכול לאבד את עצמו ולא לזכור איפה הוא התחיל את השורה. מומלץ לרשום לא יותר מ-16 מילים בשורה. יש ליצור ריווח בין פסקאות כדי ליצור תחושה של קטעים קצרים ולא בלוק טקסט עצום מיימדים ומפחיד.
17. 
    יש להשתמש בתמונות ברזולוציה נמוכה - 72 ppi - זו רזולוצית מסך. אין טעם להשתמש ברזולוציה גבוהה יותר מה שיגרום לתמונות כבדות, מה שיגרום לאיטיות בהעלת הדף לאויר. (מומלץ בחום להשתמש באפשרויות המתקדמות של תוכנת הפוטושופ של שמירה לאינטרנט - save for web & devices).

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

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

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

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

כל הזכיויות שמורות לגרייס דיזיין