סגירת עיצוב לפיתוח

החלטות לפני שפותחים Figma

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

• רזולוציית דסקטופ: האם המוצר שלנו יותאם רק לדסקטופים של 13 אינטש (רוחב ברוטו 1280) ואז התוכן פשוט מתמרכז במסכים גדולים יותר (והרקעים נמתחים לכל רוחב המסך), או שנרצה ליצור עיצוב ייחודי גם למסכים גדולים יותר כמו 24 או 27 אינטש (רזולוציות 1920-2560) – כלומר רספונסיב בדסקטופ?
  * כמובן שלהחלטה ליישם רספונסיב גם בדסקטופ, או אפילו גם לטאבלט, יש גם השלכות תקציביות, ולכן כדאי שכל הגורמים הרלוונטיים יהיו מסונכרנים על ההחלטה הזו.
• רזולוציית טאבלט: בגדול טאבלטים יודעים לעשות Scale Down סביר באופן אוטומטי. במקרים בהם נרצה להתאים את העיצוב בצורה ספציפית לחוויית טאבלט (או גם לדסקטופים בהם החלון מוקטן נניח לחצי רוחב), יש להחליט על כך מראש, ולהגדיר את טווח הרזולוציות. טאבלט במצב Landscape נע בין רזולוציות של 1024 (אייפד רגיל) ל-1366 (אייפד פרו). במצב Portrait הטווח 768-1024 בהתאמה.
• רזולוציית סמארטפון: טווח הרזולוציות במצב Portrait הוא 320 (אייפון SE למיניהם), דרך 360 (גלקסי רגילים לדורותיהם), 375 (אייפון רגיל) ועד סביב 420 למכשירי האולטרא. את העיצוב יש לבנות ברזולוציה הכי נמוכה אליה אנחנו מכוונים, ולתת לטקסטים ולשורות להישבר בהתאם לרוחב המכשיר של המשתמש. התאמת עיצוב מיוחד לסמארטפון מצב Landscape היא דיי נדירה, וממילא חופפת ברוחבה לטאבלטים.
• קו פולד: קריטי שנקבל החלטות, ונשקף ללקוח, את קו התוכן הנראה לפני שהמשתמש צריך לגלול. גם בישראל 2023 (תשפ"ג!) הנושא עקרוני ביותר ללקוחות, ואפילו משתמשים מתקדמים לעיתים מפספסים שיש גלילה, בעיקר כשפורסים את ה-Hero על 100% מגובה המסך. לכן קריטי להחליט ולשקף את ההחלטה הזו גם ללקוח וגם בעיצוב עצמו. כמו"כ צריך לזכור שמגובה המסך יש להפחית לפחות 150 פיקסלים של סרגלי הכלים. במסך 1920×1080 קו הפולד יהיה כ-900 פיקסלים, במסך 1366×768 קו הפולד יהיה כ-650 – וזה קו הפולד הנפוץ אליו נהוג להתייחס כשמכוונים לכלל הדסקטופים. במובייל קשה לנקוב במספר מומלץ לאור ריבוי הרזולוציות.
• מילוי גובה: עוד בעניין הפולד – ניתן להחליט שקוביות מסויימות יתפסו 100% מגובה המסך. זה נפוץ בעיקר ב-Hero sections ובפראלקסים בהם נרצה לנעוץ את אזור התוכן ולהפעיל אנימציות פנימיות. במקרה כזה חשוב גם לשקף בצורה מילולית ברורה בהערה ע"ג העיצוב שגובה הסקשן הוא 100% מדובה המסך של המשתמש, וגם לדאוג ברמה העיצובית שהתוכן יכנס בגובה של פולד אחד – אחרת תיווצר גלילה פנימית לסקשן, וגלילה בתוך גלילה זה תענוג גדול (ליוונים).
• פרופורציות של תמונות: חשוב לתכנן את סט גדלי התמונות שהלקוח יצטרך להעלות לאתר בשוטף. לדוגמא, באתר המכיל בלוג בד"כ נקדם פוסטים בעמוד הראשי וגם בבאנר בעמוד אינדקס הפוסטים. במצב כזה רצוי לתכנן סט גדלים לתמונות ה-Featured של כל פוסט באופן שגם בעמוד הראשי וגם בבאנר וגם בעמוד הפוסטים – הפרופורציה (לא בהכרח הגודל) של התמונה תהיה אחידה, כך שהלקוח יוכל להעלות תמונה אחת, והפרופורציה תישמר בכל המופעים של הפוסט (תוך דחיסה אוטומטית של הגדלים ע"י המערכת).
• רטינה: באותו ענין, חשוב להחליט האם האתר מכוון לתמוך בתמונות ברזולוציית רטינה (2x או 3x) כיוון שזה חלק מהותי מהתיכנון של כל קוביות התמונות בשלב התיכנות.

עכשיו כשסיימנו לעצב ניגש למבנה הקובץ 🙂

מבנה קובץ העיצוב

• רוחב ה-Artboard/Canvas שעליו בנוי העיצוב תמיד יהיה הרוחב המקסימאלי של המסך אליו אנחנו מכוונים. בימינו נהוג להתאים לרוחב 1920 פיקסלים רוחב, אבל יש גם משוגעים שם בחוץ. גם אם רוחב האתר עצמו, הגריד, צר יותר [כדי לתמוך גם ברזולוציות נמוכות יותר], עדיין נגדיר את הארטבורד ברוחב של המסך המקסימאלי שלנו, ע"מ לשקף הייטב מה מתיישר לגריד ומה מתיישר למסך, וכדי שהלקוח יקבל אינדיקציה למראה של האתר במציאות.
• גריד: הכרחי להחליט ולשקף את רוחב גריד התוכן שלנו, וכמובן למרכז אותו לאמצע הארטבורד. ניתן כמובן לבחור לעבוד עם יותר מרוחב גריד אחד, אך קריטי לשקף את זה בצורה ברורה.
• סטיקי Header: ככל שבחרנו לנעוץ את ההדר לראש המסך, חשוב לשקף כיצד יראה ההדר לאחר תחילת הגלילה. לעיתים מוסיפים הצללה, לעיתים משנים רקע – חשוב שזה יוצג בעיצוב.
• Drop downs: תפריטים נפתחים, פקדי סלקט-בוקס מיוחדים – חשוב לשקף בעיצוב במצב סגור ופתוח.
• אייקונים: מומלץ להיצמד לפורמט SVG היכן שניתן. אייקונים שמיועדים להיות מוצגים אחד ליד השני או אחד מתחת לשני בקו ישר – נכניס לתוך canvas בגודל זהה (עם white space כמובן) ע"מ לאפשר לאתר להציג אותם מיושרים בצורה מוש.
• שכבות: רצוי להימנע משכבות מיותרות, תיקיות-בתוך-תיקיות ללא סיבה טובה, ובעיקר – להשאיר טקסטים כשכבה עליונה היכן שאפשר.
• מידות: למעט גובה-שורה וקרנינג, CSS לא תומך בחצאי פיקסלים. גדלי פונטים, רוחבים של קוביות וכד' תמיד צריך להגדיר בפיקסלים שלמים.
• הפרדת קוביות: להימנע לגמרי-לגמרי מקוביות טקסט המכילות יותר ממרווח שורות אחד, או מכילות יותר מאלמנט אחד. לדוגמא שדה כותרת ושדה טקסט מתחתיו – תמיד יהיו ב-2 קוביות נפרדות ולא בקוביה אחת עם מרווחי שורה שונים, וכדי לאפשר למתכנת למדוד מרווח בין אלמנטים בצורה מדוייקת.
• מצבי עכבר (hover states): יש לשקף את העיצובים לכל האינטראקציות הרצויות, כמו למשל מעברי עכבר על כפתורים, לינקים, תפריטים, קוביות מידע וכד'. ניתן/רצוי לשקף את כל המצבים הללו בארטבורד נפרד באופן שיווצר מעיין Style guide קטן לאתר, וכך נוכל לייצר סגנון אחיד לכל הכפתורים, קוביות וכו' יחד עם האינטראקציות הרצויות שלהם.
• Styleguide: מומלץ מאוד להכין ארטבורד שיגדיר בצורה אחידה סט של גדלי כותרות, טקסטים, כפתורים – ובעצם ליצור מיני סטיילגייד שיאפשר למתכת ליישם כסט כלים, ולעשות reuse לאורך האתר. באופן זה, אם נרצה לשנות קומפוננטה כלשהי – ניתן יהיה בהגדרה אחת לשנות את כל המופעים שלה. כשיש חוסר אחידות, ואין סטיילגייד מסודר, כמו למשל מרווח לא אחיד בין כותרת של סקשן לבין התוכן שלו – למתכנת תיווצר דילמה אם ליישם כל מקרה באופן חריג, או להיצמד לערך הראשון שהוא נתקל בו, ואז הדיוק של העיצוב יפגע. לא מדובר על יצירת של Design system שלהם, אלא רק ריכוז של האלמנטים בפרוייקט כדי לאפשר למעצב לוודא שהם אחידים, ולא יתוכנותו שונה במקרה של זליגה קטנה בעיצוב פה ושם.
• צבעים: כנ"ל לגבי צבעים. מומלץ לשלב את פלטת הצבעים של הפרוייקט בתוך הארטבורד של הסטיילגייד, כדי להימנע למשל משימוש ב-20 גוונים של אפור ללא הצדקה.
• Section: באופן עקרוני, אלא אם הוגדר אחרת, מנהל התוכן יכול לשכפל סקשנים/קומפוננטות בין עמוד לעמוד וכן לשנות את סדר הסקשנים בתוך העמוד. לכן חשוב לתכנן את העיצוב באופן שכל סקשן עומד בפני עצמו, וכל סקשן יושב בתוך קוביה משלו שמדגימה את הריווחים העליונים והתחתונים שלו. במקרים חריגים שבהם אנחנו לא רוצים לנתק בין שני סקשנים, כלומר שתמיד יהיה דבוקים, חשוב לתקשר את זה למתכנת בצורה ברורה, ע"מ שיפתח את שני הסקשנים – כסקשן אחד.
• שבירת טקסטים: בהתאם להחלטות על הרזולוציות הנתמכות, צריך לשקול בכל מקום איפה להגביל את רוחב אזורי הטקסט, והיכן לאפשר לטקסט לגלוש חופשי. רוחב הקוביות חייב להשתקף בקובץ העיצוב, והמתכנת דוגם את הרוחב הזה בתכנות.
  ישנו עיקרון לפיו במקום שבו מנהל התוכן שבר שורה ידנית בטקסט, המשמעות היא ששבירת השורה תתקיים בכל המכשירים למיניהם, שכן מערכת הניהול היא אחת עבור כל האתר. לכן אם בחרנו שלדוגמא ב-Hero בעמוד הראשי הטקסט צריך להיות שבור ל-3 שורות – ננסה למצוא את הרוחב האופטימאלי לקוביית הכותרת באופן שלא יצריך ממנהל התוכן לשבור שורות ידנית. ובהמשך להתאים את רוחב הקוביה וגודל הפונט ברספונסיב. כמובן שזה לעולם לא יקנה שליטה מלאה ומדוייקת, זה חלק מהדילמות שנוצרו בעקבות ריבוי של רזולוציות המכשירים בימינו, אך ככל שמבינים את הרעיון לאורך העיצוב ומתכננים אותו נכון – אפשר להגיע למצב סביר (פלוס) ברוב המקרים.

חומרים נלווים לעיצוב

• פונטים: אם כל הפונטים נלקחו מהספרייה של גוגל, אפשר פשוט לציין את זה והמתכנת יודע לשאוב משם. ככל שבחרתם פונט ייחודי/קנייני, יש לרכוש רישיון שלו ולהעביר למתכנת ברישיון ופורמט WEB טרם תחילת התכנות.
• אנימציות: באתרים בהם נרצה להטמיע אנימציות פראלקס או אינטראקציות מיוחדות (פרט ל-slide/fade סטנדרטיים), נצטרך להמחיש אותם בצורה כלשהי. זה יכול להיות באמצעות רפרנס לאתר אחר (לא אפל, אלא אם יש תקציב של אפל!), יצירת סרטון קצר, או סקריפט מילולי מאוד-מאוד מפורט. בד"כ דיוק של תזמונים קל לבצע לאחר שהאנימציה עומדת.
• Favicon: אייקון מייצג לראש הטאב של הדפדפן, וכן למקרה שמשתמש שומר את האתר על המסך הראשי של הסמארטפון שלו (אינגייג'ד!). לצורך כך יש צורך בשני קבצים: SVG ללא white space (לקחת בחשבון dark/light theme של הדפדפן), וכן קובץ PNG בגודל 196*196 פיקסלים, אפשר לעגל פינות ולהותיר אותן שקופות לשיקולכם.
• תמונת שיתוף: הגודל המומלץ של פייסבוק הוא 1200 רוחב על 630 גובה, בפורמט JPG. כל הרשתות יודעות לשלוף ולקצוץ את אותה התמונה (וואטסאפ, טוויטר, ליקדאין, וכד').

צריך לעצב מובייל?

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

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

טיפים לתוכן:

בנגיעה כללית כיוון שממילא זה לא נוגע לשלב העיצוב:

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

סוגי דפדפנים

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