טיפים לשימור יחסים בין מעצב למתכנת

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

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

הנה זה בא, לא בהכרח לפי סדר חשיבות:

פונטים:

• לא להשתמש בגדלי פונטים בחצאים, כמו 11.5, אלא במספרים שלמים בלבד. כנ"ל לגבי מרווחי שורות וקרנינג
• לפני שימוש בפונט מיוחד, יש להחליט אם הכוונה היא שהוא יהיה כותרת-תמונה או טקסט-חי (לקחת בחשבון שיקולי SEO). במקרה של טקסט חי – יש הכרח לוודא שקיימת גירסאת Web לפונט (חינאמי או ברכישה חד-פעמית / subscription) ולוודא שהלקוח מוכן לשאת בעלות הזו
• רצוי להפריד Text Boxes כשיש גדלי פונטים שונים. למשל – כותרת בקוביה שלה, תקציר מודגש בקוביה משלו, וטקסט רץ בקוביה משלו.

פלטפורמה:

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

שכבות:

• במידת האפשר, לא לשחק עם opacity של טקסט חי סתם כדי להבהיר אותו, כיוון שכשאנחנו דוגמים את הצבע מתוך הגדרות הפונט – הוא נותן את הצבע המקורי ולא הבהיר יותר
• חשוב מאוד לשמור על השכבות עם האפקטים חיים ולא לאחד אותם, כיוון שחלק מהאפקטים מתורגמים ל-CSS3, וחשוב למתכנת לראות את הגדרת האפקט בתוך ה-Blending Options
• לשלב את כל הסטייטים של המעבר עכבר וה-Selected בתוך ה-PSD עצמו. רצוי ליצור שיכבה עליונה ביותר שבה יהיו מעיין בועות חצי-שקופות שיסמנו על אילו כפתורים או לינקים יש סטייטים כאלה, כדי שנדע לחפש עבור אותו כפתור את הסטייטים המתאימים
• לזכור שסטייטים של מעבר עכבר אינם מופעלים במכשירים מבוססי מגע
• שימוש בתיקיות וחלוקה של אזורים וקוביות לתיקיות שונות ומוקננות מקל מאוד על מציאת שכבות והבנת ההיררכיה.
• בהתאם לכך, שכבות ותיקיות מיותרות – רצוי למחוק לפני העברה לתיכנות. למתכנת אין צורך בהן והן עלולות לבלבל אותו ולגרום לכך שיתכנת אזורים שלא אמורים להופיע כלל בתוצר הסופי
• עבור כל תבנית שיש לתכנת (בין אם יש כמה תבניות בתוך אותו PSD ובין אם כל תבנית מגיעה ב-PSD משל עצמה), יש לשלוח למתכנת העתק ב-Jpeg של איך התבנית אמורה להיראות בסופו של דבר, עם כל הסטייטים (התנהגויות) שלה. זאת כדי להימנע מטעויות שנגרמות משכבות נעלמות או מהבדלי גירסאות של פוטושופ
• עדיף לכלול פתקים למתכנת בתוך הפוטושופ עצמו, ולא לשלוח לצד כל PSD גם מסמך טקסט

גריד:

• אם ה-header וה-footer זהים, מיותר לשכפל אותם לכל התבניות, מספיקה דוגמא אחת, וזה מחשש שיהיה עידכון שלא ייושם על כל התבניות, ואז נוצר בלאגן של גירסאות
• להקפיד לסכם עם הלקוח את הרזולוציה המתאימה, גם ברוחב במסך וגם מבחינת מה נכנס בפולד. אפשר לשמור את העיצוב כתמונה ולהעלות לאתר http://mocku.ps וכך המעצב והלקוח יכולים לקבל תחושה איך האתר יראה בתוך הדפדפן ברזולוציות שונות.
• חשוב לסגור פוטר ראוי לאתר, שכולל את פס "כל הזכויות שמורות" והקרדיטים. טוב שהלקוח יראה את התמונה המלאה והכוללת בתוך העיצוב, ולא שנוסיף את הדברים בדיעבד

קבצים:

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

הכנה למערכת ניהול:

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

זהו, נקווה שבזה הצלחתי להפחית לפחות 5% מהיקף סבבי התיקונים שמתכנתים רגילים לקבל בעקבות הנקודות האלה, שלהם נראות מאוד טריוויאליות מלכתחילה

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