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

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

לתקשר עם הלקוח

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

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

יש לוגו?

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

אפיון אתר

ננסה במס' שלבים ליצור כללים לאפיון נכון של אתר:

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

באיזו תוכנה יש לעצב אתר אינטרנט?

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

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

ניווט באתר

  • הניווט באתר צריך להיות פשוט וברור, כך שגם האדם שרק למד לגלוש, יוכל להתמצות באתר. היות ואי הבנה לאן הולכים ומה עושים עכשיו ואיך חוזרים לדף הקודם, יגרום לגולש לנטוש את האתר מהר ולמצוא אתר ברור יותר.
  • חשוב להוסיף לדפים בר ניווט טקסטואלי המציין באיזה דף הגולש נמצא בשלב זה, לדוגמה: דף ראשי > כתבות > הסיפור שלי. מעין היררכיית נתיבים. באנגלית מושב זה נקרא Bread Crumbs – כלומר משאירים לגולש פירורי לחם שעוזרים לו למצוא את הדרך חזרה לקטגוריות שמהן הגיע.
  • בר ניווט מיספרי המראה לגולש באיזה עמוד הוא נמצא או באיזה מספר תמונה הוא צופה עכשיו. לדוגמה: <1,2,3,4,5,6> כולל חיצי ימינה ושמאלה לחזרה לדף הקודם או להבא. באנגלית מושג זה נקרא: Pagination

מיקום הלוגו באתר

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

קביעות וחזרתיות

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

פונטים – גופנים

  • אזור המלל צריך להיות נקי ברור וללא קשקושים היות וגם כך קשה לקרוא טקסט מהמסך, אנחנו לא רוצים להקשות על הגולש עוד יותר.
  • בכדי למנוע בעיות כמו ג'יבריש וסימנים לא מובנים בטקסט, השתמשו בפונטים (גופנים) המוצגים באתר מכל מחשב ומכל מקום בעולם – פונטים בינלאומיים "UNICODE" כמו אריאל, טהומה, דויד, אהרוני או טיימס, ורדנה… אם אתם רוצים להשתמש בפונטים יפים ומיוחדים, באנגלית תמצאו הרבה מאוד. בעברית תמצאו פונטים של גוגל בחינם או שתצטרכו ליידע את הלקוח שיש תוספת עלות עבור רכישת פונט יחודי לאתר מחברת פונטים.
  • פונטים צריכים להיות עקביים. לא מומלץ להשתמש ביותר מ-2 סוגי פונטים. כנ"ל לגבי גדלי פונטים – 2-3 גדלי פונטים יספיקו. טקסט רץ לקריאה – 14-18 פיקסל. טקסט לכותרות – 18-30 פיקסל.
  • צבעים לטקסטים – שוב, לא יותר מ- 2-3 צבעים לטקסט רץ, כותרות משנה, כותרות ראשיות.
  • כאשר יש שימוש בטקסט ארוך באתר כמו בדף מאמרים למשל, לא רצוי ליצור שורות ארוכות מדי מקצה לקצה בהן הגולש יכול לאבד את עצמו ולא לזכור איפה הוא התחיל את השורה. יש ליצור ריווח בין פסקאות כדי ליצור תחושה של קטעים קצרים ולא בלוק טקסט עצום מימדים ומפחיד.

באיזה גודל לעצב את האתר?

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

  • אפשר ליצור מסמך חדש בגודל 1920X1200 פיקסל וכך לעצב לגודל מסך גדול של "24.
  • יש ליצור עוד שני מצבים שהעיצוב יראה שונה כאשר המסך קטן יותר למשל במסך ברוחב 1360 פיקסל וברוחב 1024 פיקסל
  • בנוסף יש ליצור עוד דוגמה למתכנת איך יראה האתר במובייל
  • גובה האתר יכול להיות דינמי – למשל אם התוכן רב, תופיע גלילה בצד ונוכל להמשיך ולגלול… אך רצוי להימנע מדפים ארוכים כאורך הגלות.

דף בית

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

תמונות באתר

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

"החלקים הלבנים"

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

צבעים בטוחים

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

תהנו,
רן