האתר מעוצב - עכשיו מה?

בניית אתרים וחוויית משתמש >> תוכן מקצועי

רוצים חיזוק בעקבות האירוע במירון
בצעד לא שגרתי התקיימה אמש בפרוג הרצאה מרתקת וייחודית מאת הרב חיים הורוביץ רבה של שכונת צהלה בתל אביב ומרצה מבוקש. בהרצאה שלשם שינוי לא הייתה...
אד"ם הוא הנפש/ אסון מרון תשפ"א
גְּוִיָּה רְטוּשָׁה כִּכְבָרָה נִרְאֵית כְּמוֹ יָצְאָה מִקִּבְרָה תָּאִים מֵתִים בְּרִקְמָה חֲסֵרָה וְאֵין לָהּ מְתֹם בִּבְשָׂרָהּ זַרְזִיפֵי...
צ'יטוטים עם הצ'אטבוטים
הוובינר אתמול היה משעשע, מחכים ובעיקר מפתיע. הגרפים שהציגו צמד המאסטרים ליאור וגיא עם העליות בהמרות באתרים שיש את הפיצ'ר הנחמד של הצ'אטבוט נתנו...
לחלום שלכם יש בית
הגיע הזמן להתעורר! החלום שלכם עומד להתגשם. בית חם בהגרלה היסטורית וחלומית במיוחד. הבית שלכם במרחק נגיעה... תעצמו את העיניים ותתחילו לדמיין על...

Netta

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

ShirStudio

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

Netta

משתמש מקצוען
אם את מעצבת בדיגיטל את צריכה לייצא לו את זה
את יכולה להשתמש בתוכנות כמו XD פיגמה וכו
לא סוגרים לפידיאף
זאת אומרת, בתוכנות האלו יש פונקציה שפשוט מייצאת את כל העיצוב כקובץ HTML?
 

ShirStudio

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
פיתוח / אפיון / עיצוב אתרים

ShirStudio

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

תמר לב

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

סיון

המניפה
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
פיתוח / אפיון / עיצוב אתרים
שאלה למתמצאים.
אני מעצבת דיגיטל. ברגע שהעיצוב של האתר גמור בתוכנה הגרפית (אילוסטרייטור נגיד), סגרתי אותו לPDF -
ועכשיו מה?
איך המתכנת יוצר מזה אתר?
כלומר, איך הוא יודע בדיוק אילו ערכים להכניס בCSS, צבעים מדויקים, מרחקים בין אובייקטים, ריווח בין תווים אפילו?
אני לא אמורה לתת לו את כל המידע הזה ידני, נכון?
אז איך זה קורה? יש איזו תוכנה שממירה את זה?
אודה למידע.
יום טוב!
אני מציעה לך לשאול את מי שהולך לבנות את הפרונט של האתר.
אני אישית מקבלת קבצי PSD, או Sketch וכדו' קבצים שניתן לייצא בזאפלין/אבוקדו וכדו'
ע"מ להבטיח מקסימום דיוק אפשרי,
כמו"כ אני אוהבת לקבל Style guide שמפרט בעיקר על רחיפות עכבר (HOVER) הערות מיוחדות וכדו'
+ גרסת התאמה למובייל וטאבלאט.

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

יוסי דויד

מהמשתמשים המובילים!
מנהל
מנוי פרימיום
מנוי פרימיום
בוגר/תלמיד פרוג
מוזיקה ונגינה
עיצוב גרפי DIP
פיתוח / אפיון / עיצוב אתרים
בואו נעשה סדר:

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

שלב מסירת הפרוייקט למתכנת
1. שליחת קובץ סגור של האתר הסופי - לדוגמא
2. שליחת קובץ פתוח של האתר הסופי בתוכנת העיצוב המתאימה, בשביל שיוכל לראות כל אלמנט בנפרד ויסיק מסקנות על ריווחים/גדלים ושאר מידע, ובשביל שיוכל להעתיק את הטקסטים, הצבעים וכו'...
3. שליחת כל אלמנט בנפרד להטמעה באתר, למעט טקסטים וכל מה ש CSS יכול לייצר (צורות גיאומטריות, טקסט ושאר ירקות...)

אופן סגירה למתכנת

אילוסטרייטור
- דרך חלון Assets Export
- באמצעות Artboards נפרד לכל אלמנט

פוטושופ
- בחירת השכבה/קבוצת-שכבות > לחיצה ימנית > Quick Export To PNG. (ניתן לבחור מספר שכבות, והתוכנה תייצא כל שכבה לקובץ נפרד, לכן מומלץ לתת שמות לשכבות, ולקבץ שכבות שאנו רוצים לייצא לקובץ אחד)
- שיתוף המסמך באמצעות Adobe Creative Cloud
- שיתוף המסמך באמצעות Zeplin

חובה לעבוד עם Character Styles, כי המתכנת יקבל את זה כחלק מהמשלוח ויציל אתכם מבלאגן באתר :)

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

XD
- לייצא באמצעות חלון הייצוא
- לשתף באמצעות Share To Developer (לא לשכוח להגדיר באיזה תכנות מדובר: Web או ios וכו')

פיגמה וסקצ' אני לא מכיר, אז אשמח אם מישהו ימשיך אותי מכאן :)
 

סיון

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

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

שלב מסירת הפרוייקט למתכנת
1. שליחת קובץ סגור של האתר הסופי - לדוגמא
2. שליחת קובץ פתוח של האתר הסופי בתוכנת העיצוב המתאימה, בשביל שיוכל לראות כל אלמנט בנפרד ויסיק מסקנות על ריווחים/גדלים ושאר מידע, ובשביל שיוכל להעתיק את הטקסטים, הצבעים וכו'...
3. שליחת כל אלמנט בנפרד להטמעה באתר, למעט טקסטים וכל מה ש CSS יכול לייצר (צורות גיאומטריות, טקסט ושאר ירקות...)

אופן סגירה למתכנת

אילוסטרייטור
- דרך חלון Assets Export
- באמצעות Artboards נפרד לכל אלמנט

פוטושופ
- בחירת השכבה/קבוצת-שכבות > לחיצה ימנית > Quick Export To PNG. (ניתן לבחור מספר שכבות, והתוכנה תייצא כל שכבה לקובץ נפרד, לכן מומלץ לתת שמות לשכבות, ולקבץ שכבות שאנו רוצים לייצא לקובץ אחד)
- שיתוף המסמך באמצעות Adobe Creative Cloud
- שיתוף המסמך באמצעות Zeplin

חובה לעבוד עם Character Styles, כי המתכנת יקבל את זה כחלק מהמשלוח ויציל אתכם מבלאגן באתר :)

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

XD
- לייצא באמצעות חלון הייצוא
- לשתף באמצעות Share To Developer (לא לשכוח להגדיר באיזה תכנות מדובר: Web או ios וכו')

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

עריכה - קראתי עכשיו שכתבת למעט CSS
 

יוסי דויד

מהמשתמשים המובילים!
מנהל
מנוי פרימיום
מנוי פרימיום
בוגר/תלמיד פרוג
מוזיקה ונגינה
עיצוב גרפי DIP
פיתוח / אפיון / עיצוב אתרים
בפועל באמת יוצא לכם לעבוד עם מתכנתים שמבקשים כל אלמנט בנפרד?
בינתיים יצא לי לעבוד עם עצמי כמשתמש אלמנטור ;)
אני תמיד מעצב בתוכנת עיצוב ולא מתחיל ישר באלמנטור...
 

סיון

המניפה
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
פיתוח / אפיון / עיצוב אתרים
בינתיים יצא לי לעבוד עם עצמי כמשתמש אלמנטור ;)
הכי טוב תכלס :)

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

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

LEAH PIK

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
איך אני מיצאת מפוטושופ קוד HTML5 למתכנת?
יש אפשרות דרך פוטושופ או ששחייב תוכנה אחרת?
 

יוסי דויד

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

LEAH PIK

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
כן הוא רוצה קוד HTML 5
 

תמר לב

משתמש מקצוען
פיתוח / אפיון / עיצוב אתרים
@LEAH PIK
מסתבר שהוא מתכוון שהוא מעוניין לקבל את המידע של הcss
במידה ואכן לכך התכוון, יש להעלות לאתרים כמו ז'פליון/ אינווזין/ סימפלי
 

המספרים של פרוג:

337,452

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

323

משתמשים מבקרים ברגע זה באתר

4,986

הודעות נכתבו בממוצע ליום בחודש האחרון

לוח נדל"ן | למכירה והשכרה

לוח מודעות | קניה מכירה

לוח דרושים

אולי מעניין אותך גם...

חינמי, פרמטרי, עברי - פונט חינם לסיום ספירת העומר
מי שעוקב אחריי, מדי שנה אני מעלה עיצוב מדי יום בעומר. בשנים מסוימות זה הסברים על מושגים בעיצוב, שנה אחת זה היה שירים (פיוטים, מזמורים וגם שירים...
5.00 star(s) 1 דירוגים
המכתב שלי לאבא
מה עושים כשאי אפשר לפספס עוד סגולה?
ברמת בית שמש ג' התרחש אתמול מאורע היסטורי. באמת. לראשונה מאז קמה השכונה הטריחו עצמם רבני השכונה לעלות לציונו של השל"ה הקדוש ולהתפלל עבור תושבי...
מדריך להגשת בקשה להחזר מס - 2020
מדריך מעודכן להגשת בקשה להחזר מס - אתר רשות המיסים בכל שאלה והתלבטות מומלץ ביותר לפנות לאיש מקצוע! מדריך זה נועד למי שאינם חייבים להגיש דוח שנתי...
דגשים בהגשת דוחות מס הכנסה לשנת 2020
דגשים ושינויים בהגשת דוחות מס הכנסה לשנת 2020 בדוחות השנתיים על ההכנסות שיוגשו בגין שנת המס 2020, יש לתת גילוי ופירוט לפי ההוראות החדשות...
למעלה