ראשי עיצוב אתרים מאמרים אחסון אתרים צור קשר

מאגר אתרים בתחום המדיה


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


עיצוב אתרים / בניית אתרים


אחסון אתרים / ריסיילר


גרפיקאים / מעצבים גרפים


צלמים


קידום אתרים


פלאשיסטים / מתכנתים


מאיירים / אנימטורים


קורסים בגרפיקה ומדיה


בתי דפוס ושילוט


מאמרים ומדריכים


שרותים נילווים במדיה


צור קשר


מאמרים ומדריכים > טיפים והערות לעיצוב אתר אינטרנט

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

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

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

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

יש לוגו?

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

איפיון אתר

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

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

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

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

בר טעינה - Preloader

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

על נוחות, פשטות, וניווט באתר

ניווט באתר

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

מיקום הלוגו

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

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

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

טקסט באתר - פונטים - גופנים

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

גודל האתר

גודל האתר צריך להיות בגודל מתאים למסך ממוצע. רוב משתמשי המחשב היום הם בעלי מסך של מעל 17 אינץ', של 22 אינץ' ואף יותר. לדוגמה: מסך בגודל של 22 אינץ' ישתמש ברזולוציה גבוהה של 1680 פיקסל לרוחב. ובכל זאת לא נעצב אתר ברוחב כה רחב כי למשתמש מחשב יש לרוב חלון מועדפים פתוח בצד שתופס מקום, יהיו תוספות כמו גלילה לאתר וגלילה למועדפים. לגבי הגובה יש הרבה אלמנטים שתופסים מקום כמו: חלונות ממוזערים בתחתית המסך, בר עליון לכתובת אינטרנט ועוד בר של גוגל, בר רדיו וכל אחד עם הברים שהוא מוסיף לדפדפן. לכן, אני ממליץ לבנות אתר בגודל של 900x700 פיקסל.  כך נהיה בטוחים שכל הגולשים רואים את תוכן האתר, ללא צורך בגלילה אנכית או רוחבית כולל גולשי לפטופים במסך גדול של 15 אינץ' (שיצטרכו לגלול רק מעט).
ובכל זאת, גובה האתר יכול להיות דינמי – למשל אם התוכן רב, תופיע גלילה בצד ונוכל להמשיך ולגלול... אך רצוי להמנע מדפים ארוכים כאורך הגלות.
רוחב האתר יכול להיות דינמי אף הוא. כך שהאתר ישנה את רוחבו בהתאם לרוחב המסך של הגולש – מתאים יותר לפורטלים עם תוכן רב שצריכים כמה שיותר שטח.

דף הבית

דף הבית הוא הדף הראשי, זה שהגולש רואה בפעם הראשונה, לכן הדף הראשי צריך להיות הכי מרשים ומזמין.
בדף הבית מומלץ להשתמש בתמונה מפתה ומעניינת. הרי ידוע שתמונה אחת שווה אלף קליקים.
לא מומלץ לשפוך טקסט בדף הבית, היות והוכח שהגולש לא אוהב לקרוא טקסטים באתרים כאשר הוא מחפש משהו. הגולש לא קורא, הוא מרפרף, הוא סורק את האתר עם העיניים וממשיך הלאה. לכן 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
מאמר מאת: גרייס דיזיין – עיצוב אתרים, עיצוב גרפי, לימודי גרפיקה


חזור למעלה
© כל הזכויות שמורות ל'המדיה' | עיצוב אתרים - גרייס דיזיין