UI איך **לא** לעצבן מפתחים #אתגר מתגלגל

  • הוסף לסימניות
  • #1
בעקבות האתגור ע"י @סיון (המקסימה! הזדמנות קטנה לבטא ההערכה על ההשקעה בפורום כאן.) ואתגר מתגלגל

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

מקרה א'
איזה כיף, עיצוב חדש, אתר חדש :)
המפתח קיבל מהמעצב עיצוב דסקטופ ומובייל, הבעיות התחילו כשהמעצב ראה תוצרים מפיתוח המובייל, ואהממ, זה לא היה דומה (בלשון עדינה:)) למה שהוא עיצב:(
מה התברר? המעצב עיצב עבור מסכי רטינה (מכשירים בעלי רזולוציה כפולה בה על כל פיקסל במסך מוצגים בפועל שני פיקסלים) המתכנת לא קיבל את המידע באופן ברור, והתוצאה הייתה לא נעימה לשני הצדדים, הכל ענק פי 2, יכולים לנסות לדמיין טקסט רץ בגודל 28px במובייל:eek:
לא הספיקו להתקדם הרבה, כיוון שזה היה נראה מוזר, עדיין, הייתה זאת עגמת נפש (זמן וכסף) עבור מה שכבר בוצע...

מקרה ב'
הפעם נתקלתי בו אני, החודש, קיבלתי מחברת העיצוב עיצוב מקסים, רק בצורה לא ממש נגישה:confused:
האופציות שעמדו לפני בקבלת החומרים לעיצוב הן indesign (אהםם, מישהו יכול להסביר לי מה אני אמורה לעשות עם זה?:<) או תמונת jpg (גרוע לא פחות), החברה טענה שככה תמיד הם עובדים (כן, אז הגיע הזמן לשנות הרגלים) ונאלצתי להסתדר עם זה.
אז מה זה אומר?
זה אומר שאני מקבלת תמונה, כלומר בלוק וצריכה לנחש ולמדוד מה גודל הפונטים (את הצבעים קבלתי) ריווחים מדיוקים, גדלי התמונות וכו' חוויה גרועה למפתח ועולה הרבה יותר זמן (זמן כידוע = כסף) למי שביקש את התוצר,
טעויות מוזרות קורות, כמו: מה הגדול הנכון של התמונה - גרירת התמונה ל chrome והיא תופסת את כל גודל המסך, אולי זאת לא הפרופורציה האמתית שלה? (גודל התמונה משתנה לפי גובה הדפדפן שפתחתם) מתברר שאכן רק אם התמונה בכרום על 80%, הקנה מידה שלה יהיה נכון:eek:.

מקווה שאתם עדיין כאן, שהובנתי ולא העמסתי:)

המקרים הנ"ל שווים למאמץ, זמן של הרבה אנשים וכמובן כסף, איך אפשר למנוע אותם?

אז אחרי ס"ד שכולנו צריכים, יש כמה דברים גם ארציים שניתן לעשות:)
  • הכי טוב כמובן שיחת היכרות של המעצב והמפתחים, אם מעצבים משהו פחות רגיל, וודאו בברור שהמפתח/ הראש צוות מודע לזה (עיצוב לרטינה זה לאא רגיל:eek:)
  • עצבו רק בתוכנות שהמפתח יוכל לראות את העיצוב כקוד Inspect, לא חסרות תוכנות שמתממשקות ל Photoshop וסקצ' כמו - sympli zeplin, invision, אופציות מעולות נוספות הן כמובן XD ו Figma.
    רק לא indesign או תמונה סטטית ושאר ירקות מהסגנון, זה גורם לכאב לב וחוסר הבנה למה זה לא דומה לעיצוב. (פליז, זה כבר Must!:confused:)
  • שלחו מראש עיצוב לכל המסכים (כמה שזה מתאפשר כמובן) המפתח יזהה רכיבים שחוזרים על עצמם ויתכנן באופן נכון את בנית הרכיבים, האתר יהיה בנוי יפה יותר ויהיו פחות באגים (כן, כן גם עיצוביים) (גם על זה יש סיפור, אבל זה כבר אולי לפעם אחרת:rolleyes:)
  • שלחו מראש עיצוב גם לדסקטופ וגם למובייל.
  • יחד עם קבצי העיצוב רצוי להוסיף גם עמוד Guide של צבעי האתר, פונטים, גדלי כותרות, כפתורים ורכיבים שחוזרים על עצמם (אגב, זה גם מתקבל יוקרתי, מסודר ונכון יותר;))
  • אם אפשר (וזה כדאי) להעביר מראש עיצוב גם למעברי עכבר הקיימים באתר, לפעמים זה חוסך בניה ושינוי של רכיבים פעמיים (ממש ככה) גם את זה אפשר להוסיף ל Guide.
  • כשאומרים אתר רספונסיבי, לעצב רספונסיבי ולא להתפרע עם רכיבים שמה שזהה ביניהם זה שהם דומים:)
  • כשאומרים אתר תומך Bootstrap אז לא להתכוון שהוא יהיה bootstrapי אלא לבצע את זה, כוונות לא ממש עוזרות כאן...

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

אההם עד כאן דבריי:)
מזדהים? יש לכם רעיונות להוסיף? אשמח מאד לשמוע!

ואם כבר יש במה;), אני מפתחת ומעצבת Client, למעלה מ3 שנים, בעיקר באמצעות HTML, CSS, SASS, BOOTSTRAP ואתרי WP, אוהבת לפתח אתרים פיקסל פרפקט ממש:)
מחפשת עכשיו את האתגר הבא שלי (האמתי ביום יום:)) אם יש לכם/ן רעיון/לאן להעביר את הקורות חיים שלי אני אשמח:eek:.

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

****
מי שהחזיק מעמד עד כאן, טיפ קטן שמתאים לכולם, לי הוא שינה את החיים (יש, יש טיפים כאלו:)),
כלי ששומר ההעתקות שבצעתם (כל ctrl+c ctrl+v) וניתן לבצע בו חיפוש של העתקות ישנות.
אני מתחברת לDitto, לאחר ההורדה, מפעילים באמצעות ctrl טילדה ~ רק צריך להתרגל אליו, והחיים קלים ויפים יותר:)
דוגמה: ניתן להעתיק יחד בפעם אחת גם שם משתמש וגם סיסמא ואח"כ להשתמש בכלי כדי להדביק כל אחד בנפרד,
ניתן לחפש בו טקסטים/סיסמאות ישנות וכו'.
כלי דומה קיים ב windows ע"י חלונות (צורה של חלונות במקלדת - שפותח את התחל) +V

תודה שהייתם איתי עד כאן (מקווה שיש כאלו:))
תמר.
 
נערך לאחרונה ב:
  • הוסף לסימניות
  • #2
ואם כבר יש במה;), אני מפתחת ומעצבת Client, למעלה מ3 שנים, בעיקר באמצעות HTML, CSS, SASS, BOOTSTRAP ואתרי WP,
מחפשת עכשיו את האתגר הבא שלי (האמתי ביום יום:)) אם יש לכם/ן רעיון/לאן להעביר את הקורות חיים שלי אני אשמח:eek:.
כשכירה או כפרילסרית?
יש לי משהו מיידי במתכונת פרילנס, דברי איתי lamdan.yadan בג'ימייל
 
  • הוסף לסימניות
  • #4
בעקבות האתגור ע"י @סיון (המקסימה! הזדמנות קטנה לבטא ההערכה על ההשקעה בפורום כאן.) ואתגר מתגלגל

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

מקרה א'
איזה כיף, עיצוב חדש, אתר חדש :)
המפתח קיבל מהמעצב עיצוב דסקטופ ומובייל, הבעיות התחילו כשהמעצב ראה תוצרים מפיתוח המובייל, ואהממ, זה לא היה דומה (בלשון עדינה:)) למה שהוא עיצב:(
מה התברר? המעצב עיצב עבור מסכי רטינה (מכשירים בעלי רזולוציה כפולה בה על כל פיקסל במסך מוצגים בפועל שני פיקסלים) המתכנת לא קיבל את המידע באופן ברור, והתוצאה הייתה לא נעימה לשני הצדדים, הכל ענק פי 2, יכולים לנסות לדמיין טקסט רץ בגודל 28px במובייל:eek:
לא הספיקו להתקדם הרבה, כיוון שזה היה נראה מוזר, עדיין, הייתה זאת עגמת נפש (זמן וכסף) עבור מה שכבר בוצע...

מקרה ב'
הפעם נתקלתי בו אני, החודש, קיבלתי מחברת העיצוב עיצוב מקסים, רק בצורה לא ממש נגישה:confused:
האופציות שעמדו לפני בקבלת החומרים לעיצוב הן indesign (אהםם, מישהו יכול להסביר לי מה אני אמורה לעשות עם זה?:<) או תמונת jpg (גרוע לא פחות), החברה טענה שככה תמיד הם עובדים (כן, אז הגיע הזמן לשנות הרגלים) ונאלצתי להסתדר עם זה.
אז מה זה אומר?
זה אומר שאני מקבלת תמונה, כלומר בלוק וצריכה לנחש ולמדוד מה גודל הפונטים (את הצבעים קבלתי) ריווחים מדיוקים, גדלי התמונות וכו' חוויה גרועה למפתח ועולה הרבה יותר זמן (זמן כידוע = כסף) למי שביקש את התוצר,
טעויות מוזרות קורות, כמו: מה הגדול הנכון של התמונה - גרירת התמונה ל chrome והיא תופסת את כל גודל המסך, אולי זאת לא הפרופורציה האמתית שלה? (גודל התמונה משתנה לפי גובה הדפדפן שפתחתם) מתברר שאכן רק אם התמונה בכרום על 80%, הקנה מידה שלה יהיה נכון:eek:.

מקווה שאתם עדיין כאן, שהובנתי ולא העמסתי:)

המקרים הנ"ל שווים למאמץ, זמן של הרבה אנשים וכמובן כסף, איך אפשר למנוע אותם?

אז אחרי ס"ד שכולנו צריכים, יש כמה דברים גם ארציים שניתן לעשות:)
  • הכי טוב כמובן שיחת היכרות של המעצב והמפתחים, אם מעצבים משהו פחות רגיל, וודאו בברור שהמפתח/ הראש צוות מודע לזה (עיצוב לרטינה זה לאא רגיל:eek:)
  • עצבו רק בתוכנות שהמפתח יוכל לראות את העיצוב כקוד Inspect, לא חסרות תוכנות שמתממשקות ל Photoshop וסקצ' כמו - sympli zeplin, invision, אופציות מעולות נוספות הן כמובן XD ו Figma.
    רק לא indesign או תמונה סטטית ושאר ירקות מהסגנון, זה גורם לכאב לב וחוסר הבנה למה זה לא דומה לעיצוב. (פליז, זה כבר Must!:confused:)
  • שלחו מראש עיצוב לכל המסכים (כמה שזה מתאפשר כמובן) המפתח יזהה רכיבים שחוזרים על עצמם ויתכנן באופן נכון את בנית הרכיבים, האתר יהיה בנוי יפה יותר ויהיו פחות באגים (כן, כן גם עיצוביים) (גם על זה יש סיפור, אבל זה כבר אולי לפעם אחרת:rolleyes:)
  • שלחו מראש עיצוב גם לדסקטופ וגם למובייל.
  • יחד עם קבצי העיצוב רצוי להוסיף גם עמוד Guide של צבעי האתר, פונטים, גדלי כותרות, כפתורים ורכיבים שחוזרים על עצמם (אגב, זה גם מתקבל יוקרתי, מסודר ונכון יותר;))
  • אם אפשר (וזה כדאי) להעביר מראש עיצוב גם למעברי עכבר הקיימים באתר, לפעמים זה חוסך בניה ושינוי של רכיבים פעמיים (ממש ככה) גם את זה אפשר להוסיף ל Guide.
  • כשאומרים אתר רספונסיבי, לעצב רספונסיבי ולא להתפרע עם רכיבים שמה שזהה ביניהם זה שהם דומים:)
  • כשאומרים אתר תומך Bootstrap אז לא להתכוון שהוא יהיה bootstrapי אלא לבצע את זה, כוונות לא ממש עוזרות כאן...

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

אההם עד כאן דבריי:)
מזדהים? יש לכם רעיונות להוסיף? אשמח מאד לשמוע!

ואם כבר יש במה;), אני מפתחת ומעצבת Client, למעלה מ3 שנים, בעיקר באמצעות HTML, CSS, SASS, BOOTSTRAP ואתרי WP, אוהבת לפתח אתרים פיקסל פרפקט ממש:)
מחפשת עכשיו את האתגר הבא שלי (האמתי ביום יום:)) אם יש לכם/ן רעיון/לאן להעביר את הקורות חיים שלי אני אשמח:eek:.

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

****
מי שהחזיק מעמד עד כאן, טיפ קטן שמתאים לכולם, לי הוא שינה את החיים (יש, יש טיפים כאלו:)),
כלי ששומר ההעתקות שבצעתם (כל ctrl+c ctrl+v) וניתן לבצע בו חיפוש של העתקות ישנות.
אני מתחברת לDitto, לאחר ההורדה, מפעילים באמצעות ctrl טילדה ~ רק צריך להתרגל אליו, והחיים קלים ויפים יותר:)
דוגמה: ניתן להעתיק יחד בפעם אחת גם שם משתמש וגם סיסמא ואח"כ להשתמש בכלי כדי להדביק כל אחד בנפרד,
ניתן לחפש בו טקסטים/סיסמאות ישנות וכו'.
כלי דומה קיים ב windows ע"י חלונות (צורה של חלונות במקלדת - שפותח את התחל) +V

תודה שהייתם איתי עד כאן (מקווה שיש כאלו:))
תמר.

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

ממש תודה!כיף היה לי להכיר אותך!
 
  • הוסף לסימניות
  • #6
@תמר לב - תודה!
וואו - ממש תוכן פרקטי ואמיתי מתוך השטח - תענוג!
אפשר להתרשם בקלות מהמקצועיות שלך.

מרשה לי לנעוץ את האשכול? נעצתי!
יש כאן תובנות כל כך חשובות שאת עושה כאן שירות מצויין גם למעצבים וגם למפתחים.

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

מצטרפת לכל ההמלצות - מ2 הצדדים גם מצד העיצוב וגם מצד הפיתוח.

מוסיפה על זה:
עצבו רק בתוכנות שהמפתח יוכל לראות את העיצוב כקוד Inspect, לא חסרות תוכנות שמתממשקות ל Photoshop וסקצ' כמו - sympli zeplin, invision,
גם את avocode שהוא כלי נחמד מאד להתממשקות.

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

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

  • כשאומרים אתר רספונסיבי, לעצב רספונסיבי ולא להתפרע עם רכיבים שמה שזהה ביניהם זה שהם דומים:)

וזה נכון לגמרי, אלא אם כן סגרתם על עיצוב מיוחד למובייל - אז בכייף : )

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

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

מי שהחזיק מעמד עד כאן,

ברור ששרדנו והחזקנו מעמד,
כייף לאתגר פה ניקים.ות!
 
  • הוסף לסימניות
  • #7
@סיון איזה כיף שקראת בעיון! תודה!!

מרשה לי לנעוץ את האשכול? נעצתי!
יש כאן תובנות כל כך חשובות שאת עושה כאן שירות מצויין גם למעצבים וגם למפתחים.
מתחילה להסמיק:eek:

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

התפנקת לגמרי : )
אבל באמת זה יכול לחסוך המון הלוך ושוב!

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

ברור ששרדנו והחזקנו מעמד,
כייף לאתגר פה ניקים.ות!
תודה, כיף שיש כזו מנהלת!:)
 
  • הוסף לסימניות
  • #8
מחכים מאד.
@כוכב מחכים להמשך...

(חשבתי כבר שהגלגל התפנצ'ר;))
 
  • הוסף לסימניות
  • #9
ממש מרתק. למען האמת, יש התקלויות לשני הצדדים.
ממש חשוב לדבר על זה ולעושת תיאום ציפיות
 
  • הוסף לסימניות
  • #10
ואווו, מרתק ממש.
עשית לי טוב, נהנת שיש מקצוענים בתחום, שיורדים לרזולציות.
יאלופה:)
 

פרוגבוט

תוכן שיווקי
פרסומת

הצטרפות לניוזלטר

איזה כיף שהצטרפתם לניוזלטר שלנו!

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

לוח מודעות

הפרק היומי

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


תהילים פרק כה

אלְדָוִד אֵלֶיךָ יי נַפְשִׁי אֶשָּׂא:באֱלֹהַי בְּךָ בָטַחְתִּי אַל אֵבוֹשָׁה אַל יַעַלְצוּ אֹיְבַי לִי:גגַּם כָּל קוֶֹיךָ לֹא יֵבֹשׁוּ יֵבֹשׁוּ הַבּוֹגְדִים רֵיקָם:דדְּרָכֶיךָ יי הוֹדִיעֵנִי אֹרְחוֹתֶיךָ לַמְּדֵנִי:ההַדְרִיכֵנִי בַאֲמִתֶּךָ וְלַמְּדֵנִי כִּי אַתָּה אֱלֹהֵי יִשְׁעִי אוֹתְךָ קִוִּיתִי כָּל הַיּוֹם:וזְכֹר רַחֲמֶיךָ יי וַחֲסָדֶיךָ כִּי מֵעוֹלָם הֵמָּה:זחַטֹּאות נְעוּרַי וּפְשָׁעַי אַל תִּזְכֹּר כְּחַסְדְּךָ זְכָר לִי אַתָּה לְמַעַן טוּבְךָ יי:חטוֹב וְיָשָׁר יי עַל כֵּן יוֹרֶה חַטָּאִים בַּדָּרֶךְ:טיַדְרֵךְ עֲנָוִים בַּמִּשְׁפָּט וִילַמֵּד עֲנָוִים דַּרְכּוֹ:יכָּל אָרְחוֹת יי חֶסֶד וֶאֱמֶת לְנֹצְרֵי בְרִיתוֹ וְעֵדֹתָיו:יאלְמַעַן שִׁמְךָ יי וְסָלַחְתָּ לַעֲוֹנִי כִּי רַב הוּא:יבמִי זֶה הָאִישׁ יְרֵא יי יוֹרֶנּוּ בְּדֶרֶךְ יִבְחָר:יגנַפְשׁוֹ בְּטוֹב תָּלִין וְזַרְעוֹ יִירַשׁ אָרֶץ:ידסוֹד יי לִירֵאָיו וּבְרִיתוֹ לְהוֹדִיעָם:טועֵינַי תָּמִיד אֶל יי כִּי הוּא יוֹצִיא מֵרֶשֶׁת רַגְלָי:טזפְּנֵה אֵלַי וְחָנֵּנִי כִּי יָחִיד וְעָנִי אָנִי:יזצָרוֹת לְבָבִי הִרְחִיבוּ מִמְּצוּקוֹתַי הוֹצִיאֵנִי:יחרְאֵה עָנְיִי וַעֲמָלִי וְשָׂא לְכָל חַטֹּאותָי:יטרְאֵה אוֹיְבַי כִּי רָבּוּ וְשִׂנְאַת חָמָס שְׂנֵאוּנִי:כשָׁמְרָה נַפְשִׁי וְהַצִּילֵנִי אַל אֵבוֹשׁ כִּי חָסִיתִי בָךְ:כאתֹּם וָיֹשֶׁר יִצְּרוּנִי כִּי קִוִּיתִיךָ:כבפְּדֵה אֱלֹהִים אֶת יִשְׂרָאֵל מִכֹּל צָרוֹתָיו:
נקרא  2  פעמים
למעלה