תכנות אתרים + גרפיקה

[davidnead]

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

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

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

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

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

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

תודה רבה

[חגי]

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

[yossiz]

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

[davidnead]

@yossiz
אני מדבר על מתכנתים בלי חוש עיצובי (רמז: אני), ועל סטנדרט עבודה מקובל. אני אוחז עוד לפני ההלוך ושוב.
מי כותב את הHTML? את הCSS? מי מתחיל? ממה מתחילים? תמיד XD? איך עובדים עם XD?

[chagold]

@davidnead אמר בתכנות אתרים + גרפיקה:

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

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

אופציה שניה זה ע"י גרפיקאים שלמדו UI / UX ובאמצעות תוכנות ייעודיות מוציאים כביכול דף אינטרנט עם כל הJS בפנים והמתכנת צריך להתאים את זה לאתר.
באופציה השניה הJS ה'מעניין' יותר קל להיות לו מוטמע בדף והמתכנת לא צריך לעבוד על 'איך ליישם את זה', כיון שהכל מגיע לו מוכן מהגרפיקאי.
@ג-מייקה לדוגמא מייצא עיצובי אתרים (גם) בדרך השניה.

[davidnead]

@chagold אמר בתכנות אתרים + גרפיקה:

אופציה שניה זה ע"י גרפיקאים שלמדו UI / UX ובאמצעות תוכנות ייעודיות מוציאים כביכול דף אינטרנט עם כל הJS בפנים והמתכנת צריך להתאים את זה לאתר.

תכניות ייעודיות שמוציאות HTML+CSS+JS (לשם מה JS) למי שאין לו מושג בHTML? אתה מתכוון סוג אדובי דרימוור וכאלו?

[chagold]

@davidnead אמר בתכנות אתרים + גרפיקה:

@chagold אמר בתכנות אתרים + גרפיקה:

אופציה שניה זה ע"י גרפיקאים שלמדו UI / UX ובאמצעות תוכנות ייעודיות מוציאים כביכול דף אינטרנט עם כל הJS בפנים והמתכנת צריך להתאים את זה לאתר.

תכניות ייעודיות שמוציאות HTML+CSS+JS (לשם מה JS) למי שאין לו מושג בHTML? אתה מתכוון סוג אדובי דרימוור וכאלו?

לא מכיר את התוכנות.
JS עבור כל הווידג'טים. (פופאפ, קרוסלת תמונות וכו').

[מוטי אורן]

@davidnead אם אתה כותב בפריימוורקים כדוגמת vue.js כמו שראיתי שכתבת בשרשור כאן, אתה יכול להשתמש בספריות מוכנות של קומפוננטות מעוצבות, כדוגמת Vuetify, buefy, ועוד רבות וטובות. בצורה כזאת אתה לא צריך לדאוג ל-CSS מאפס.

[yossiz]

@davidnead אמר בתכנות אתרים + גרפיקה:

תכניות ייעודיות שמוציאות HTML+CSS+JS (לשם מה JS) למי שאין לו מושג בHTML? אתה מתכוון סוג אדובי דרימוור וכאלו?

@chagold אמר בתכנות אתרים + גרפיקה:

.
@ג-מייקה לדוגמא מייצא עיצובי אתרים (גם) בדרך השניה.

אאל"ט הוא מתכוון ל-webflow

[yossiz]

@davidnead אמר בתכנות אתרים + גרפיקה:

מי כותב את הHTML? את הCSS? מי מתחיל? ממה מתחילים? תמיד XD? איך עובדים עם XD?

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

[davidnead]

@yossiz אמר בתכנות אתרים + גרפיקה:

ואז המתכנת פשוט מוציא HTML ו-CSS
הXD יודע להוציא HTML וCSS?

[yossiz]

@davidnead אני לא הייתי מעורב בחלק העצובי. אני יותר איש בק אנד. אבל נראה לי שאפשר לקבל ממנו CSS בסיסי. לא נראה לי שהוא נותן HTML.

[ג'מייקה]

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

[ayali]

@yossiz אמר בתכנות אתרים + גרפיקה:

(אגב, לא חייבים XD, יש גם את figma ששמעתי טוענים שהוא יותר טוב למתכנתים)

אני הבנתי ש XD יש בו אפשרות לתרגם את מה שהמעצב מכין לקוד HTML ו CSS אפילו יש למעצב אפשרות להשתמש בחומרים מ MATERIAL .
לעומת זואת, FIGMA משמש בשביל איפיון התוכנה שם יש אפשרות לראות את התוכנה כביכול פועלת עם מעבר של מסכים על ידי לחיצה וכו'.

[davidnead]

@ג-מייקה אמר בתכנות אתרים + גרפיקה:

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

בכיף. איך פונים אליך?

[ג'מייקה]

@davidnead אמר בתכנות אתרים + גרפיקה:

בכיף. איך פונים אליך?

forum.miktso.ot@gmail.com

[davidnead]

@מוטי-אורן אמר בתכנות אתרים + גרפיקה:

@davidnead אם אתה כותב בפריימוורקים כדוגמת vue.js כמו שראיתי שכתבת בשרשור כאן, אתה יכול להשתמש בספריות מוכנות של קומפוננטות מעוצבות, כדוגמת Vuetify, buefy, ועוד רבות וטובות. בצורה כזאת אתה לא צריך לדאוג ל-CSS מאפס.

ניסיתי את vue-material עד שגיליתי שאין לזה תמיכה בעברית. (יש איזה חבילות תיקון RTך שלא עובדות תקין).
יש ספריות כאלו שיש להם תמיכה טובה בRTL?

[chagold]

@davidnead אולי זה (זה אדמין אבל אני לדוגמא מנסה להשתמש בזה גם בשביל הקליינט).
ויש הרבה קומפוננטים שנמצאים באתרים של vue.

[מוטי אורן]

@davidnead תבדוק את Vuetify (הבאתי את הקישור למעלה) לפי מה שזכור לי יש להם תמיכה מעולה בRTL. אתה יכול למצוא פה רשימה של 15 ספריות של קומפוננטות UI ל Vue, תבדוק מה הכי מתאים לך.
@chagold דווקא נראה ספרייה מוצלחת, מעניין לבדוק את זה.

[davidnead]

@מוטי-אורן אמר בתכנות אתרים + גרפיקה:

Vuetify

Vuetify אכן יפה. אבל זה רכיכי UI, שזה יפה אבל עדי לא תבניות. ראיתי תבניות בודדות שמבוססות עליו.

[davidnead]

@chagold אמר בתכנות אתרים + גרפיקה:

@davidnead אולי זה (זה אדמין אבל אני לדוגמא מנסה להשתמש בזה גם בשביל הקליינט).
ויש הרבה קומפוננטים שנמצאים באתרים של vue.

זה אתר דמו. אבל איזה ספריה זה? וכשאני מנסה להיכנס לדומיין הראשי האנטיוריס (אסט) חוסם את זה

[chagold]

@davidnead אמר בתכנות אתרים + גרפיקה:

אתר

https://themeforest.net/item/adminify-vuejs-bootstrap4-admin-template/20833480

[ayali]

@ג-מייקה בתור אחד שמבין בזה אולי אתה יכול לעזור לי?
אני רוצה עיצוב של חלון ראוה יפה לתוכנה שלי עם תמונות שמתחלפות
יש לזה משהו מוכן מ material ?
או משהו מוכן אחר עם קוד HTML CSS?

[ג'מייקה]

@ayali אמר בתכנות אתרים + גרפיקה:

@ג-מייקה בתור אחד שמבין בזה אולי אתה יכול לעזור לי?
אני רוצה עיצוב של חלון ראוה יפה לתוכנה שלי עם תמונות שמתחלפות
יש לזה משהו מוכן מ material ?
או משהו מוכן אחר עם קוד HTML CSS?
תוכנת ווב? ומה זה מוכן? מה מוכן?...