Design על איזה גודל דף ללכת?

[חישוקים]

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

האם פרופורציה של 1440X1024 מומלצת?

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

מקווה שהשאלה מובנת,
אשמח לשמוע מה דעת המקצוענים פה.
תודה מראש!

 

[חישוקים]

מנסה שוב...

 

[סיון]

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

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

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

UX - עושים היכרות >>> 15 ימים של Figma

האשכול הזה הוא מסע של 15 ימים (5 ימים בשבוע * 3 שבועות) של התנסות בפיגמה. בכל יום הודעה או שתיים. אני לא באה ללמד פיגמה אלא לשתף רשמים שלי, כמעצבת איך זה מרגיש לעבוד עליה, המלצות, טריקים וגם דברים מעצבנים או בקיצור: עקומת למידה אישית תוך כדי התנסות. *** קודם אפרט קצת על פיגמה, ההחלטה והפרטים...

www.prog.co.il

 

[srp]

בגדול, הגודל המומלץ לדסקטופ היום, זה 1920X1280
תורידי קצת מה1280 בשביל השורת וינדוס למטה וכו'

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

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

 

[סיון]

תורידי קצת מה1280 בשביל השורת וינדוס למטה וכו'

זה הגובה? מה הכוונה?

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

איפה עיצבת לפני פיגמה?

 

[חגית קרמר]

1920px*1080px

זה הגובה? מה הכוונה?

זה הגובה הנפוץ. אני עובדת על 1920px*1080px.
אני גם בונה - לכן עורכת התאמות תו"כ.

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

בדיוק.

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

תנסי את XD של אדובי.

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

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

 

[חגית קרמר]

אה, והיא גם חינמית הXD.
ההגבלה היא לפרוטוטייפ אחד.

ואם יש לך את הענן של אדובי - את מקבלת אותה חינם, כולל הכל.

 

[סיון]

זה הגובה הנפוץ. אני עובדת על 1920px*1080px.
אני גם בונה - לכן עורכת התאמות תו"כ.

תודה
אבל מה הכוונה להוריד קצת בשביל השורת ווינדוס למטה?

תורידי קצת מה1280 בשביל השורת וינדוס למטה וכו'

ומצטרפת לגבי ההמלצה לנסות את xd במיוחד למי שפחות התחבר לפיגמה.

 

[חגית קרמר]

תודה
אבל מה הכוונה להוריד קצת בשביל השורת ווינדוס למטה?

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

 

[סיון]

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

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

 

[חגית קרמר]

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

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

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

למעשה, הגודל הנפוץ לרזולוצית מסך הוא 1920px*1080px. (ולא 1280px - זה הרוחב של מסכים ישנים)
הפיקסלים שנופלים - לא מטרידים אותי. לרוב אני מתבססת על אחוזים בבניה, ולא על פיקסלים, וסה"כ מבצעת התאמות פה ושם לעיצוב. הכל כדי להגיע לרספונסיביות חלקה.
ולכן כמעט ואין לי בעיות בלפטופ (ואני מתכוונת גם לענתיקות של 1025px רוחב).

 

[סיון]

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

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

למעשה, הגודל הנפוץ לרזולוצית מסך הוא 1920px*1080px. (ולא 1280px - זה הרוחב של מסכים ישנים)
הפיקסלים שנופלים - לא מטרידים אותי. לרוב אני מתבססת על אחוזים בבניה, ולא על פיקסלים, וסה"כ מבצעת התאמות פה ושם לעיצוב. הכל כדי להגיע לרספונסיביות חלקה.
ולכן כמעט ואין לי בעיות בלפטופ (ואני מתכוונת גם לענתיקות של 1025px רוחב).

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

 

[חישוקים]

תודה לכל האלופות שענו לי,
עזרתן לי מאד!

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

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

UX - עושים היכרות >>> 15 ימים של Figma

האשכול הזה הוא מסע של 15 ימים (5 ימים בשבוע * 3 שבועות) של התנסות בפיגמה. בכל יום הודעה או שתיים. אני לא באה ללמד פיגמה אלא לשתף רשמים שלי, כמעצבת איך זה מרגיש לעבוד עליה, המלצות, טריקים וגם דברים מעצבנים או בקיצור: עקומת למידה אישית תוך כדי התנסות. *** קודם אפרט קצת על פיגמה, ההחלטה והפרטים...

www.prog.co.il

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

ואת האשכול על פיגמה למדתי ביסודיות
תודה על ההפניה,
ותודה ל @EPaP על השיתוף המדהים הזה!

בגדול, הגודל המומלץ לדסקטופ היום, זה 1920X1280
תורידי קצת מה1280 בשביל השורת וינדוס למטה וכו'

מעולה, תודה!
את עובדת על כל מסך בנפרד או על דף אחד ארוך?

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

איפה את מעצבת היום?

@חגית קרמר , תודה על הסקירה של XD.
בהחלט מפתה.

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

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

למעשה, הגודל הנפוץ לרזולוצית מסך הוא 1920px*1080px. (ולא 1280px - זה הרוחב של מסכים ישנים)
הפיקסלים שנופלים - לא מטרידים אותי. לרוב אני מתבססת על אחוזים בבניה, ולא על פיקסלים, וסה"כ מבצעת התאמות פה ושם לעיצוב. הכל כדי להגיע לרספונסיביות חלקה.
ולכן כמעט ואין לי בעיות בלפטופ (ואני מתכוונת גם לענתיקות של 1025px רוחב).

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

 

[srp]

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

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

 

[רוני רביץ]

האם פרופורציה של 1440X1024 מומלצת?

1920px*1080px

אני חושב שקצת ערבבתם שני דברים,

הגודל הנפוץ של מסכים הוא 1920-1080 (שולחני) יחס של 16-9
לכן כשמעצבים תמונות רקע של אזורים, זה היחס והגודל הרצוי,
כמו שאמרו זה לא מדויק כי בדר"כ יחתך קצת מהגובה בגלל שורת המשימות והחלק העליון של הדפדפן,
(במסכים קטנים נחתך יותר מבגדולים)

לעומת זה הגודל של 1440-1024
זה גודל בשביל הקונטיינר, כלומר החלק של התוכן באתר,
הגודל הזה הוא די גדול ומודרני, ולא ייראה טוב במסכים קטנים יותר,

באלמנטור למשל הברירת מחדל זה 1140
ובהרבה תבניות זה 1200

 

[חגית קרמר]

לעומת זה הגודל של 1440-1024
זה גודל בשביל הקונטיינר, כלומר החלק של התוכן באתר,
הגודל הזה הוא די גדול ומודרני, ולא ייראה טוב במסכים קטנים יותר,

לכן בונים באחוזים - ואז, גם קונטיינרים רחבים יכולים להתאים.

 

[חגית קרמר]

XD לא פיקששה אצלכם מבחינת גדלים?

היא לא מדוייקת. צריך להקטין קצת את הפונטים.
התרגלתי.

 

[srp]

היא לא מדוייקת. צריך להקטין קצת את הפונטים.
התרגלתי.

זה ממש מבאס, אני מצפה מתוכנה כזו להיות סופר מדויקת

 

[EPaP]

זה ממש מבאס, אני מצפה מתוכנה כזו להיות סופר מדויקת

מבאס?
זה כמו לצפות מרכב שתהיה לו מערכת היגוי.
תוכנת עיצוב צריכה להיות מדוייקת. זה קומן-סנס.

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

 

[srp]

מבאס?
זה כמו לצפות מרכב שתהיה לו מערכת היגוי.
תוכנת עיצוב צריכה להיות מדוייקת. זה קומן-סנס.

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

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