אהלן חברים, רקע קצר- אני מעצב ובונה אתרים כבר כמה שנים, 90% מהפרויקטים שלי אני עושה את כל התהליך עם הלקוח (גם עיצוב וגם פיתוח) אבל בחלק מהמקרים אני מקבל עיצוב ועושה רק את החלק של הפיתוח. הפוסט הבא מרכז טיפים ולקחים מעבודה עם מעצבים גרפים.
אני מאמין שאם יש כאן מעצבים שרוצים להתחיל לעצב אתרים או להשתפר בתחום הזה וזה יכול להועיל להם.
1. עבודה עם פיקסלים
בתוכנה שאיתה אתם עובדים תשימו לב שהיחידות מידה של הטקסטיםושל הקאנבס הם בפיקסלים ולא בpt או כל דבר אחר. זה יקל מאוד על המעבר לפיתוח כי אלה היחידות מידה בweb.
2. גודל הסקיצה
ההמלצה האישית שלי- רוחב 1920px (וגובה בהתאם לסקיצה).
יש כאלה שעושים ברוחב כפול מזה בשביל מסכים גדולים וכו׳, אני פחות ממליץ.
הנקודה העיקרית כאן היא לא להמציא רוחב שלא קיים בשום מקום 🙂
אגב. עוד טיפ בעניין הזה- הדרך הכי מדויקת לראות סקיצה שבנינו ברוחב 1920 היא לפתוח אותה במסך HD על רוחב מלא. זה יתן לנו את הפרופציה הנכונה של הטקסטים ואז נוכל לדעת אם הגדלים שעשינו הגיוניים.
3. גדלי טקסטים וכותרות
כותרות באתר אינטרנט בנויות בהיררכיה, כותרת H1 הכי גדולה ואז H2 ו h3 וכו׳… בעניין הגדלים יש 2 תופעות עיקריות שיוצא לי לראות:
- שימוש בפונטים ענקיים (!!) בסקיצה.
- מלא גדלים שונים בין כותרות / כפתורים וכו׳.
(חשוב להגיד שאני לא בא לפגוע ביצרתיות של מעצבים 🙂 יש מקרים שזה בסדר גמור להשתמש בגדלים שונים או כותרות גדולות, הרעיון כאן הוא לתת כיוון כללי למעצבים שפחות מתעסקים בweb).
אז כמה טיפים בעניין הזה:
- כותרות h1 : ברוב המקרים אני עושה בגודל 40px או משהו באזור. טקסט רץ: לרוב באזור 16px-18px. (זה לא חוק מחייב, אבל אם אתם רחוקים מזה יכול להיות שבפיתוח תגלו שזה לא הגדלים שהתכוונתם שיהיו)
- אם אתם מסתכלים על אתר קיים כרפרנס (שזה אגב טיפ בפני עצמו) אפשר בדפדפן כרום לראות את הגדלי פונטים אם לוחצים על ctrl+shift+c ועמדים על הטקסט.
- טיפ אחרון אחרון בעניין הזה (שכבר נאמר): לראות את הסקיצה במסך HD ברוחב מלא כדי להבין את הפרופרציות הנכונות.
4. עבודה עם גריד
אם תכנסו לכמה אתרי אינטרנט מהדסקטופ אתם תראו שהם בנויים עם גריד מסויים. כלומר- התוכן עצמו (הטקסטים והתמונות) נמצאים לרוב ברוחב מסוים לאורך כל העמוד. יש אתרים שבנויים על רוחב מלא או אתרים שבנויים עם אזורים מסויימים ש״שוברים״ את הגריד באזורים מסוימים ומשלבים רוחב מלא (למשל בחלק העליון של האתר, ״אזור הירו״).
הטיפ כאן הוא להיות עקביים.
אם לדוגמה קבענו גריד של 1140px (שזה אגב גריד מאוד נפוץ כי הוא נוח להתאמות רספונסיביות) אז אנחנו נשתמש בו לאורך כל העמוד (למעט אזורים ספיציים שיש צורך להשתמש בכל רוחב המסך) ולא נייצר רוחב אקראי לכל אזור בעמוד.
5. אל תמציאו את הגלגל מחדש
ברור שכולם רוצים לעצב אתר שלא נראה כמותו, להמציא את הגלגל מחדש, לשבור את כל המוסכמות, לנפץ את כל החוקים…. בקיצור הבנתם את הנקודה 🙃
אבל באינטרנט זה לרוב לא יעבוד לטובתכם.
כשמעצבים אתר צריך לחשוב קודם כל על הגולש ולייצר לו חווית משתמש נוחה וברורה ככל האפשר. אם נעשה שימוש מסיבי באלמנטים שלא קיימים במקומות אחרים באינטרנט והגולשים כבר רגילים אליהם- יהיה להם יותר קשה להשתמש באתר.
אגב, עוד משהו על העניין הזה (סיבה נוספת לא להמציא את הגלגל):
יצא לי להתקל בסקיצות שהמעצב מאוד התפרע ויצר דברים מאוד לא סטנדרטיים. כל אלמנט ייחודי כזה בפועל לקח הרבה שעות פיתוח למתכנת/מפתח אתר ובסופו של דבר הלקוח משלם על זה ביוקר שלא לצורך. לכן אם אתם מעצבים משהו ייחודי שלא ראיתם בשום מקום אחר כדי לבדוק עם מפתח אתרים האם זה ישים ואם כן כמה זה מורכב כדי לא ליצור ללקוח שלכם בעיות בהמשך הפרויקט.
6. ״מעבר עכבר״ (Hover) לא קיים במובייל
יש מקרים שמעצבים אלמנטים מיוחדים שאמורים להופיע במעבר עכבר. חשוב לזכור שבמובייל אין עכבר והרבה פעמים האלמנטים האלה לא מתנהגים כמו שהיינו רוצים או יוצרים חווית משתמש בעייתית. כדאי לקחת את זה בחשבון.
7. פונטים
נושא חשוב מאוד!
הרבה פעמים מעצבים עושים סקיצות עם פונטים שרכשו ונמצאים על המחשב שלהם מבלי לתאם ציפיות עם הלקוח לגבי קניית רישיון web לפונטים.
חשוב לדעת- הפונטים שאפשר להשתמש בהם חינם בבנית אתר הם רק הפונטים של גוגל. כל פונט אחר שקנינו כנראה שלא נוכל להטמיע אותו כטקסט באתר שלנו בלי לקנות רישיון web לאותו הפונט.
מומלץ לשאול את הלקוח אם רישיון web לפונט זה משהו שהוא מוכן להשקיע עליו כסף ורק אם קיבלנו ממנו אישור להשתמש בפונט כזה בסקיצה.
8. תוכן משפיע על העיצוב
נתקלתי מספר פעמים בסקיצות שעברו לפיתוח שכל התוכן בסקיצה הוא ״לורם איפסום״, בהמשך התהליך כשהתוכן הסופי הוכנס לאתר זה פשוט לא נראה כמו שצריך כי כמות התוכן הייתה שונה בצורה קיצונית מכמות התוכן שתוכננה בסקיצה.
הטיפ כאן הוא להשתדל לבקש להעביר לפני העיצוב את התוכן או אפילו תוכן ראשוני (טיוטה ראשונה של התוכן) כדי להבין פחות או יותר את המבנה, אורך הטקסטים וכו׳.
9. הבנת מבנה כללי של אתרים- חלוקה לאזורים ועמודות.
אתר אינטרנט מחולק לאזורים (סקשנים) ובכל אזור יש עמודה/עמודות. זה עקרון שאני רואה לפעמים מעצבים שקצת מנסים ״לשבור״ אותו, למשל- מייצרים רקע ללא הפרדה בין סקשנים שאמור להיות מתמשך בין הסקשנים.
אין עם זה בעיה ברמה העקרונית, כמעט את הכל ניתן ליישם בסופו של דבר, פשוט יכול להיות שהלייאוטים המורכבים האלה ייצרו הרבה אתגרים בשלב הפיתוח או בשלב התאמת האתר למסכים השונים, כדאי לקחת את זה בחשבון.
10. חשיבה רספונסיבית
טוב זה הסעיף שכנראה יהיה הכי פחות ברור בפוסט 😅
יצא לי לעבוד עם מעצבים שרגילים לעצב לפרינט ופשוט לא חושבים על זה שהעיצוב שהם עושים לא יסגר בpdf סטטי בסוף התהליך, אלא יהפוך לאתר שיוצג בגדלי מסכים שונים.
אז גם אם לא נדרשתם לעשות סקיצות מובייל / טאבלט, כשמעצבים לדסקטופ כדאי לחשוב אם הדברים שאנחנו מעצבים יכולים להיות בעייתים בגדלי מסך שונים ואולי לשקול לוותר על אלמנטים כאלה / להתייעץ עם מפתח לגבי העניין.
זהו,
אם קראתם עד כאן אני מקווה שלמדתם משהו חדש 😛
חשוב להגיד שוב- שומדבר לא נכתב במטרה לפגוע במישהו וכמובן אני לא מתיימר לכתוב את עשרת הדיברות של מעצבי האתרים. בסך הכל כמה טיפים שאולי יכולים לעזור לחלק מהאנשים כאן. 🙂
בהצלחה לכולם ✌️
6 תגובות
תוכן מעולה
קראתי כל מילה וכרגיל יסודי ובהיר כפיר!
תודה!
מלך
תודה רבה!
אהבתי ממש! תודה.
מדויק כהרגלך
למדתי המון !
לא ממש הבנתי איך עושים גריד זה רק עי קוד???
אני יושבת שעות על רספנסיביות זה לא הגיוני יש דרך קלה יותר??
מרגישה שזה ענין של משחק כל פעם מחדש ,
למדתי קורס לא הכי מקיף ממש מתומצת בתוך קורס של עיצוב גרפי