דף הבית -> דף פירוט מדריכים
-> עיצוב בסיסי
 
עיצוב בסיסי

השאלה הבאה    סדר עדיפויות וגודל    צבעים    יכולת קריאה


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

השאלה הבאה
השאלה הבאה: מי אתה, ומיהו קהל היעד שלך? אתה נערה בת שתים עשרה שרוצה ליצור קשר
עם נערות אחרות בנות שתים עשרה? נשיא חברת סטארט-אפ שמנסה לגייס כספים מבנק
השקעות?
רמז: צבע סגול וחד קרן בדרך כלל מתאימים מאוד למצבים האלו.
ואז אתה צריך לענות על שאלות טכנולוגיות. אולי תצטרך לנחש את התשובה, אבל עדיין
תצטרך לחשוב על זה. איך הקהל שלך יקבל את האתר? התוכן שלך יעניין קהל אנשי עסקים
שמגיעים לרשת ב T1 , או שזה בשביל החבר'ה בבית עם מודמים של 14.4? בזמן שאתה שוקל
את עניין המהירות, כדאי שתחשוב גם על דפדפנים ועל PLUG_INS (קובץ קטן שמגביר את
היכולות עבור תכנית גדולה, גם באינטרנט). מה יותר הגיוני למטרת האתר שלך? אתה לא צריך
שוקוויב (SHOCKWAVE), רילאודיאו (REALAUDIO) או ג'אווה (JAVA) אם כל מה
שאתה רוצה זה לפרסם תמונה של החתול שלך. מצד שני, אולי תזדקק להם אם אתה רוצה
להרשים אנשים עם כל מיני טריקים של עשן ומראות. תזכור, מנהטן נרכשה בסכום של 24$
וכמה חרוזים.

ראש העמוד עמוד ההפניות תחילת הפיסקה




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

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


ראש העמוד עמוד ההפניות תחילת הפיסקה



יכולת קריאה
השאלה השניה בגודלה לגבי צבעים היא יכולת הקריאה. המילים המודפסות צריכות לשבת טוב
על רקע הצבע שמאחוריהן. זה יותר מקונטרסט גבוה. דפוס לבן על רקע שחור הוא קריא, אבל
אם תנסה אפור בהיר על שחור, התוצאה הסופית נוחה יותר לעין. אם תלך על ניגוד גבוה ואז
תמתן אותו קצת, יצא לך בסוף משהו שסביר להניח שיהיה יותר מורכב ומעניין. כמובן, אף
פעם אי אפשר לטעות עם דפוס שחור על רקע לבן. זאת אולי לא הדרך הכי זוהרת, אבל זה הכי
בטוח שיש.
יכולת קריאה חלק שתיים: ככל שהדפוס יותר גדול, כך קל יותר לקרוא. ככל שהשורה יותר
ארוכה, כך קשה יותר לקרוא. החוק הבסיסי הוא, תשתמש בסימן <BLOCKQUOTE>
(בלוק-קווטס) או בטבלה על מנת לקצר את אורך השורות שלך. אני גם הייתי חושב פעמיים
לפני שהייתי כותב גוף טקסט בגודל הקטן מ <גודל הפונט=+1>. אחרי הכל, אתה רוצה שאנשים
יקראו את מה שאתה כותב. כמו כן, המנע מלינקים של משפטים שלמים. זה יותר נקי ופשוט
לקשר מילה אחת, או משפט קצר.
למה אני אוהב בלוק-קווטס, חלק שתיים: הרווח הלבן הוא החבר שלך. רווח לבן לאוו
דווקא צריך להיות לבן - הוא יכול להיות בכל צבע שתרצה, אבל הוא צריך להיות ריק. מנוחה
לעין זה העניין פה. אל תפחד להשאיר קצת מקום מסביב ל- GIF. שוליים שמנים סביב גוף
הטקסט גם עובדים יפה. רווח לבן עוזר לעיניים של הקורא לנוח על מה שחשוב - אם זו
תמונה או מילים. הוא עוזר לרווח ולנקות את העיצוב שלך ולהתמקד על הקונספט.
אני אסיים ברעיון נוסף שאינו שלי ואינו חדש. הבוס שלי לשעבר אמר לי פעם, "תעשה את זה
פשוט, אדיוט." (כולי תקווה שהוא לא ממש התכוון אלי). תמקד את הרעיונות שלך. תוודא
שכל מה שנמצא באתר שלך נמצא שם מסיבה מוצדקת. תוודא שאתה מקדיש כמות שווה של
זמן בבחירת התמונות והצבעים שלך כמו שאתה מקדיש לטקסט שלך. תוודא שרמת
הטכנולוגיה שהחלטת לעבוד איתה עובדת עם המטרות הכלליות של האתר שלך. תעשה את זה
פשוט. תעשה את זה חכם.

ראש העמוד עמוד ההפניות תחילת הפיסקה