בעקבות האתגור ע"י @סיון (המקסימה! הזדמנות קטנה לבטא ההערכה על ההשקעה בפורום כאן.) ואתגר מתגלגל
סיון אתגרה על המקום הרגיש (לפעמים) בין מפתחים למעצבים,
להלן כמה דוגמאות של היתקלויות מוזרות ולא מוצלחות עם מעצבים, ואיך ניתן למנוע אותן,
חושבת שאפשר ללמוד מהן הרבה, מה **לא** לעשות
מקרה א'
איזה כיף, עיצוב חדש, אתר חדש
המפתח קיבל מהמעצב עיצוב דסקטופ ומובייל, הבעיות התחילו כשהמעצב ראה תוצרים מפיתוח המובייל, ואהממ, זה לא היה דומה (בלשון עדינה) למה שהוא עיצב
מה התברר? המעצב עיצב עבור מסכי רטינה (מכשירים בעלי רזולוציה כפולה בה על כל פיקסל במסך מוצגים בפועל שני פיקסלים) המתכנת לא קיבל את המידע באופן ברור, והתוצאה הייתה לא נעימה לשני הצדדים, הכל ענק פי 2, יכולים לנסות לדמיין טקסט רץ בגודל 28px במובייל
לא הספיקו להתקדם הרבה, כיוון שזה היה נראה מוזר, עדיין, הייתה זאת עגמת נפש (זמן וכסף) עבור מה שכבר בוצע...
מקרה ב'
הפעם נתקלתי בו אני, החודש, קיבלתי מחברת העיצוב עיצוב מקסים, רק בצורה לא ממש נגישה
האופציות שעמדו לפני בקבלת החומרים לעיצוב הן indesign (אהםם, מישהו יכול להסביר לי מה אני אמורה לעשות עם זה?:<) או תמונת jpg (גרוע לא פחות), החברה טענה שככה תמיד הם עובדים (כן, אז הגיע הזמן לשנות הרגלים) ונאלצתי להסתדר עם זה.
אז מה זה אומר?
זה אומר שאני מקבלת תמונה, כלומר בלוק וצריכה לנחש ולמדוד מה גודל הפונטים (את הצבעים קבלתי) ריווחים מדיוקים, גדלי התמונות וכו' חוויה גרועה למפתח ועולה הרבה יותר זמן (זמן כידוע = כסף) למי שביקש את התוצר,
טעויות מוזרות קורות, כמו: מה הגדול הנכון של התמונה - גרירת התמונה ל chrome והיא תופסת את כל גודל המסך, אולי זאת לא הפרופורציה האמתית שלה? (גודל התמונה משתנה לפי גובה הדפדפן שפתחתם) מתברר שאכן רק אם התמונה בכרום על 80%, הקנה מידה שלה יהיה נכון.
מקווה שאתם עדיין כאן, שהובנתי ולא העמסתי
המקרים הנ"ל שווים למאמץ, זמן של הרבה אנשים וכמובן כסף, איך אפשר למנוע אותם?
אז אחרי ס"ד שכולנו צריכים, יש כמה דברים גם ארציים שניתן לעשות
מקובל שיש שני סבבי בדיקות של המעצב, אבל גם לסבב הראשון אתם צריכים לקבל תוצר דומה למה שעשיתם, עשיתם את הנ"ל וזה לא קורה?
דברו עם המפתח ונסו להבין מה הבעיה ולמה זה לא נראה כמו בעיצוב, (אם יש בעיות רציניות בעיצוב לפיתוח, המפתח אמור לשלוח כבר בקבלת העיצוב ובמהלך הפיתוח)
אתם לא צריכים בכל מצב (לדעתי) להסכים לקבל את העיצוב לבדיקה, העיצוב עובר לבדיקה כאשר הוא ראוי לה.
כמובן, תמיד יהיו תיקונים רק יש הבדל בין תיקונים לתיקונים, (בטוחה שאתם יכולים לספר על זה).
אההם עד כאן דבריי
מזדהים? יש לכם רעיונות להוסיף? אשמח מאד לשמוע!
ואם כבר יש במה, אני מפתחת ומעצבת Client, למעלה מ3 שנים, בעיקר באמצעות HTML, CSS, SASS, BOOTSTRAP ואתרי WP, אוהבת לפתח אתרים פיקסל פרפקט ממש
מחפשת עכשיו את האתגר הבא שלי (האמתי ביום יום) אם יש לכם/ן רעיון/לאן להעביר את הקורות חיים שלי אני אשמח.
וקבלו את המאותגרת הבאה!
מאתגרת הלאה את @כוכב האלופה! מעצבת ובונה אתרים,
נראה שאסתי יודעת להגיע להבנה של הלקוח ,מה הציפיות שלו מהאתר ולממש לו אותם, תודו שזה נשמע מן קסם כזה
נשמח לשמוע על איך עושים את זה? ומה שיטת העבודה של אסתי בעיצוב אתרים.
אסתי, 48 שעות לפנייך מחכים---
****
מי שהחזיק מעמד עד כאן, טיפ קטן שמתאים לכולם, לי הוא שינה את החיים (יש, יש טיפים כאלו),
כלי ששומר ההעתקות שבצעתם (כל ctrl+c ctrl+v) וניתן לבצע בו חיפוש של העתקות ישנות.
אני מתחברת לDitto, לאחר ההורדה, מפעילים באמצעות ctrl טילדה ~ רק צריך להתרגל אליו, והחיים קלים ויפים יותר
דוגמה: ניתן להעתיק יחד בפעם אחת גם שם משתמש וגם סיסמא ואח"כ להשתמש בכלי כדי להדביק כל אחד בנפרד,
ניתן לחפש בו טקסטים/סיסמאות ישנות וכו'.
כלי דומה קיים ב windows ע"י חלונות (צורה של חלונות במקלדת - שפותח את התחל) +V
תודה שהייתם איתי עד כאן (מקווה שיש כאלו)
תמר.
סיון אתגרה על המקום הרגיש (לפעמים) בין מפתחים למעצבים,
להלן כמה דוגמאות של היתקלויות מוזרות ולא מוצלחות עם מעצבים, ואיך ניתן למנוע אותן,
חושבת שאפשר ללמוד מהן הרבה, מה **לא** לעשות
מקרה א'
איזה כיף, עיצוב חדש, אתר חדש
המפתח קיבל מהמעצב עיצוב דסקטופ ומובייל, הבעיות התחילו כשהמעצב ראה תוצרים מפיתוח המובייל, ואהממ, זה לא היה דומה (בלשון עדינה) למה שהוא עיצב
מה התברר? המעצב עיצב עבור מסכי רטינה (מכשירים בעלי רזולוציה כפולה בה על כל פיקסל במסך מוצגים בפועל שני פיקסלים) המתכנת לא קיבל את המידע באופן ברור, והתוצאה הייתה לא נעימה לשני הצדדים, הכל ענק פי 2, יכולים לנסות לדמיין טקסט רץ בגודל 28px במובייל
לא הספיקו להתקדם הרבה, כיוון שזה היה נראה מוזר, עדיין, הייתה זאת עגמת נפש (זמן וכסף) עבור מה שכבר בוצע...
מקרה ב'
הפעם נתקלתי בו אני, החודש, קיבלתי מחברת העיצוב עיצוב מקסים, רק בצורה לא ממש נגישה
האופציות שעמדו לפני בקבלת החומרים לעיצוב הן indesign (אהםם, מישהו יכול להסביר לי מה אני אמורה לעשות עם זה?:<) או תמונת jpg (גרוע לא פחות), החברה טענה שככה תמיד הם עובדים (כן, אז הגיע הזמן לשנות הרגלים) ונאלצתי להסתדר עם זה.
אז מה זה אומר?
זה אומר שאני מקבלת תמונה, כלומר בלוק וצריכה לנחש ולמדוד מה גודל הפונטים (את הצבעים קבלתי) ריווחים מדיוקים, גדלי התמונות וכו' חוויה גרועה למפתח ועולה הרבה יותר זמן (זמן כידוע = כסף) למי שביקש את התוצר,
טעויות מוזרות קורות, כמו: מה הגדול הנכון של התמונה - גרירת התמונה ל chrome והיא תופסת את כל גודל המסך, אולי זאת לא הפרופורציה האמתית שלה? (גודל התמונה משתנה לפי גובה הדפדפן שפתחתם) מתברר שאכן רק אם התמונה בכרום על 80%, הקנה מידה שלה יהיה נכון.
מקווה שאתם עדיין כאן, שהובנתי ולא העמסתי
המקרים הנ"ל שווים למאמץ, זמן של הרבה אנשים וכמובן כסף, איך אפשר למנוע אותם?
אז אחרי ס"ד שכולנו צריכים, יש כמה דברים גם ארציים שניתן לעשות
- הכי טוב כמובן שיחת היכרות של המעצב והמפתחים, אם מעצבים משהו פחות רגיל, וודאו בברור שהמפתח/ הראש צוות מודע לזה (עיצוב לרטינה זה לאא רגיל)
- עצבו רק בתוכנות שהמפתח יוכל לראות את העיצוב כקוד Inspect, לא חסרות תוכנות שמתממשקות ל Photoshop וסקצ' כמו - sympli zeplin, invision, אופציות מעולות נוספות הן כמובן XD ו Figma.
רק לא indesign או תמונה סטטית ושאר ירקות מהסגנון, זה גורם לכאב לב וחוסר הבנה למה זה לא דומה לעיצוב. (פליז, זה כבר Must!) - שלחו מראש עיצוב לכל המסכים (כמה שזה מתאפשר כמובן) המפתח יזהה רכיבים שחוזרים על עצמם ויתכנן באופן נכון את בנית הרכיבים, האתר יהיה בנוי יפה יותר ויהיו פחות באגים (כן, כן גם עיצוביים) (גם על זה יש סיפור, אבל זה כבר אולי לפעם אחרת)
- שלחו מראש עיצוב גם לדסקטופ וגם למובייל.
- יחד עם קבצי העיצוב רצוי להוסיף גם עמוד Guide של צבעי האתר, פונטים, גדלי כותרות, כפתורים ורכיבים שחוזרים על עצמם (אגב, זה גם מתקבל יוקרתי, מסודר ונכון יותר)
- אם אפשר (וזה כדאי) להעביר מראש עיצוב גם למעברי עכבר הקיימים באתר, לפעמים זה חוסך בניה ושינוי של רכיבים פעמיים (ממש ככה) גם את זה אפשר להוסיף ל Guide.
- כשאומרים אתר רספונסיבי, לעצב רספונסיבי ולא להתפרע עם רכיבים שמה שזהה ביניהם זה שהם דומים
- כשאומרים אתר תומך Bootstrap אז לא להתכוון שהוא יהיה bootstrapי אלא לבצע את זה, כוונות לא ממש עוזרות כאן...
מקובל שיש שני סבבי בדיקות של המעצב, אבל גם לסבב הראשון אתם צריכים לקבל תוצר דומה למה שעשיתם, עשיתם את הנ"ל וזה לא קורה?
דברו עם המפתח ונסו להבין מה הבעיה ולמה זה לא נראה כמו בעיצוב, (אם יש בעיות רציניות בעיצוב לפיתוח, המפתח אמור לשלוח כבר בקבלת העיצוב ובמהלך הפיתוח)
אתם לא צריכים בכל מצב (לדעתי) להסכים לקבל את העיצוב לבדיקה, העיצוב עובר לבדיקה כאשר הוא ראוי לה.
כמובן, תמיד יהיו תיקונים רק יש הבדל בין תיקונים לתיקונים, (בטוחה שאתם יכולים לספר על זה).
אההם עד כאן דבריי
מזדהים? יש לכם רעיונות להוסיף? אשמח מאד לשמוע!
ואם כבר יש במה, אני מפתחת ומעצבת Client, למעלה מ3 שנים, בעיקר באמצעות HTML, CSS, SASS, BOOTSTRAP ואתרי WP, אוהבת לפתח אתרים פיקסל פרפקט ממש
מחפשת עכשיו את האתגר הבא שלי (האמתי ביום יום) אם יש לכם/ן רעיון/לאן להעביר את הקורות חיים שלי אני אשמח.
וקבלו את המאותגרת הבאה!
מאתגרת הלאה את @כוכב האלופה! מעצבת ובונה אתרים,
נראה שאסתי יודעת להגיע להבנה של הלקוח ,מה הציפיות שלו מהאתר ולממש לו אותם, תודו שזה נשמע מן קסם כזה
נשמח לשמוע על איך עושים את זה? ומה שיטת העבודה של אסתי בעיצוב אתרים.
אסתי, 48 שעות לפנייך מחכים---
****
מי שהחזיק מעמד עד כאן, טיפ קטן שמתאים לכולם, לי הוא שינה את החיים (יש, יש טיפים כאלו),
כלי ששומר ההעתקות שבצעתם (כל ctrl+c ctrl+v) וניתן לבצע בו חיפוש של העתקות ישנות.
אני מתחברת לDitto, לאחר ההורדה, מפעילים באמצעות ctrl טילדה ~ רק צריך להתרגל אליו, והחיים קלים ויפים יותר
דוגמה: ניתן להעתיק יחד בפעם אחת גם שם משתמש וגם סיסמא ואח"כ להשתמש בכלי כדי להדביק כל אחד בנפרד,
ניתן לחפש בו טקסטים/סיסמאות ישנות וכו'.
כלי דומה קיים ב windows ע"י חלונות (צורה של חלונות במקלדת - שפותח את התחל) +V
תודה שהייתם איתי עד כאן (מקווה שיש כאלו)
תמר.
נערך לאחרונה ב: