המאמר הנ"ל נכתב על ידי עמית מורנו – מעצב אתרים ומרצה במכללה לניו מדיה בקורס לעיצוב ופיתוח תבניות וורדפרס.

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

מאז השקת הגרסא האחרונה של HTML (HTML5) וכניסתה לשוק של הגרסא האחרונה של שפת CSS (CSS3), שודרג תחום עיצוב האתרים לרמה חדשה המעניקה את מיטב הכלים הנחוצים לשם תרגום סקיצת פוטושופ לאתר אינטרנט ואף יותר מכך.

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

שימוש מינימלי בקבצים

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

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

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

כדי לאפשר עבודה נוחה כדאי גם לדאוג לקובץ PSD נפרד המכיל את כל רכיבי ה UI (user Interface), כלומר סטיילגייד. הקובץ יכלול כפתורים, תפריטים, שדות חיפוש, כרטיסיות (tabs) וכד'.

הנה דוגמה לסטיילגייד מתוך המאמר של שגיא בנושא חיתוך PSD.

עבודה עם שכבות (layers)

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

עבודה עם שכבות מסודרות, אשר לכל שכבה קיים שם המתאר את משמעות אותו אלמנט, חוסכת המון בשלב הביצוע עצמו. מעבר לכך, חשוב מאוד לדאוג שאזורים שונים בסקיצת ה PSD שלכם יהיו מאוגדים בתיקיות הנושאות את שם אותו אזור, למשל: header, footer, banner וכד'.

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

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

עבודה עם תמונות

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

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

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

שני כלים נוספים הקיימים בכל תוכנת פוטושופ ומסייעים להגיע לעבודה קלילה ובטוחה הם ה Clipping Mask וה- Blending Mode. קשרו את ה-Clipping Mask שלכם לתיקייה מסוימת כדי שתוכלו להשתמש בו שוב ושוב במקום ליצור כל פעם מחדש את אותו Clipping Mask. בנוסף, על מנת לאפשר התאמה ושינוי נכון של צבעי האתר, דאגו להשתמש ב Blending Mode.

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

עבודה עם טקסט

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

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

בדיוק כמו עם תמונות ורכיבי UI, גם מתיחה (stretch) של טקסט היא כלל שאסור לעבור עליו.

שימוש באפקטים

הקו העיצובי החדש של תחום עיצוב האתרים – Flat Design, הוא עיצוב ללא שימוש באפקטים כמו הצללה, גרדיאנט, ואפילו פינות מעוגלות, והוא מאפשר לנו תרגום סקיצת ה PSD של אתר האינטרנט לכדי קוד ללא שימוש בתמונות כלל.

מלבד הקו של ה-Flat Design, כמובן שניתן להשתמש מעת לעת באפקטים מסוימים, ואפילו ישנם אפקטים רבים שניתן לתרגמם לכדי קוד, כמו השלושה שהזכרתי לעיל: הצללה (box-shadow), גרדיאנט, ופינות מעוגלות (border-radius), עם זאת השתדלו להשתמש באפקטים כמו אלו ואחרים רק כאשר אתם מוכרחים, ובמידה והנכם משתמשים באפקטים כאלו, דאגו להשתמש באפקטים שניתן לתרגמם לקוד CSS, כמו למשל text-shadow, border = stroke וכד'. אגב, תוסף בשם CSS Hat יעזור לכם לעשות זאת.

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

כאשר אנו מתרגמים קו תוחם (stroke (border ל-CSS, עובי הקו מוסיף רוחב לאלמנט שלנו, בדיוק כמו בקו התוחם החיצוני של האלמנט בפוטושופ (outside stroke), לעומת זאת כאשר אנחנו משתמשים בקו תוחם חיצוני בפוטושופ הפינות שנוצרות הן מעוגלות.
לכן הדרך הנכונה להציג קו תוחם בפוטושופ שיתורגם בדיוק אותו הדבר ל CSS היא בעזרת קו תוחם פנימי, inside stroke, תוך התחשבות בכך שהוא אינו משפיע על רוחב האלמנט כולו ואילו בעת כתיבת קוד ה CSS מאפיין ה border כן משפיע על רוחב האלמנט.

סקיצות Responsive

המעבר לסמארטפונים וטאבלטים טומן בחובו עבודה נוספת למעצבי אתרים.

האתרים המוכרים ביותר כיום הנם אתרי Responsive המתכווננים לפי רזולוציית המסך של הגולש.

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

גודל אידיאלי של טאבלט הנפוץ ביותר כיום בקרב מעצבי אתרים הוא הגודל של iPad – 768 X 1120, ואילו גודל אידיאלי של סמארפון הוא הגודל של מסך iPhone – 320 X 480.

ישנם מגוון של דרכים לייצר סקיצות ריספונסיב, כאלו המתפרשות על רוחב מלא וכאלו המקובעות בתוך מיכל (container) שרוחבו מוגדר מראש. לרוב, רוחב אידיאלי של Container הוא בין 940 פיקסלים לבין 1024 פיקסלים.

—–

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

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

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

[wp_bannerize  group="new-media-new" limit="1"  random="1" ]

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