אילון סקירה
UI/UX Senior & Framer Developer
פרימיום לשנת 2025:
הצ'קליסט האולטימטיבי לאתרי
הצ'קליסט האולטימטיבי לאתרי
פרימיום לשנת 2025:
1 / רספונסיביות & לייאווט
מכוונים לעבוד רק עם 3 ברייקפוינטס: [דסקטופ: 1200/1400] / [טבלט: 810] / [מובייל: 390] פיקסל.
מכוונים לעבוד רק עם 3 ברייקפוינטס: [דסקטופ: 1200/1400] / [טבלט: 810] / [מובייל: 390] פיקסל.
מכוונים לעבוד רק עם 3 ברייקפוינטס: [דסקטופ: 1200/1400] / [טבלט: 810] / [מובייל: 390] פיקסל.
הקנבס עצמו וכל הקונטיינרים שבו (או לפחות 90% מהם) צריכים להפוך ל-Stacks.
הקנבס עצמו וכל הקונטיינרים שבו (או לפחות 90% מהם) צריכים להפוך ל-Stacks.
הקנבס עצמו וכל הקונטיינרים שבו (או לפחות 90% מהם) צריכים להפוך ל-Stacks.
מומלץ ש90% מהאלמנטים לכל הפחות צריכים להיות על Relative, והשאר יכולים להיות Absolute. (מנותקים מ-Stack Layout)
מומלץ ש90% מהאלמנטים לכל הפחות צריכים להיות על Relative, והשאר יכולים להיות Absolute. (מנותקים מ-Stack Layout)
מומלץ ש90% מהאלמנטים לכל הפחות צריכים להיות על Relative, והשאר יכולים להיות Absolute. (מנותקים מ-Stack Layout)
ברייקפוינטס ורוב הסקשנים מוגדרים לגובה אוטומטי (Fit) – ככה שהם מתרחבים כשמוסיפים תוכן.
ברייקפוינטס ורוב הסקשנים מוגדרים לגובה אוטומטי (Fit) – ככה שהם מתרחבים כשמוסיפים תוכן.
ברייקפוינטס ורוב הסקשנים מוגדרים לגובה אוטומטי (Fit) – ככה שהם מתרחבים כשמוסיפים תוכן.
אם צריך - מוסיפים להירו גובה מינימלי על בסיס VH (Viewport Height) - ההמלצה שלי היא בין 90~100VH, תלוי בתוכן.
אם צריך - מוסיפים להירו גובה מינימלי על בסיס VH (Viewport Height) - ההמלצה שלי היא בין 90~100VH, תלוי בתוכן.
אם צריך - מוסיפים להירו גובה מינימלי על בסיס VH (Viewport Height) - ההמלצה שלי היא בין 90~100VH, תלוי בתוכן.
רוב הפריימים צריכים להיות מוגדרים לרוחב Fill – כדי להתאים את עצמם לשינויי גודל מסך, הבסיס לרספונסיביות.
רוב הפריימים צריכים להיות מוגדרים לרוחב Fill – כדי להתאים את עצמם לשינויי גודל מסך, הבסיס לרספונסיביות.
רוב הפריימים צריכים להיות מוגדרים לרוחב Fill – כדי להתאים את עצמם לשינויי גודל מסך, הבסיס לרספונסיביות.
ה-Navbar ו-Footer שלנו צריכים להיות מוגדרים בתוך ה- Layout Template.
ה-Navbar ו-Footer שלנו צריכים להיות מוגדרים בתוך ה- Layout Template.
ה-Navbar ו-Footer שלנו צריכים להיות מוגדרים בתוך ה- Layout Template.
המבנה הסמנטי של העמוד צריך להיראות ככה: Breakpoint > Main > Section > Content
המבנה הסמנטי של העמוד צריך להיראות ככה: Breakpoint > Main > Section > Content
המבנה הסמנטי של העמוד צריך להיראות ככה: Breakpoint > Main > Section > Content
ה-Padding העליון ותחתון (ריווח בין סקשנים) מוגדר ברמת הסקשן, ו-Padding מימין ושמאל מוגדר ברמת התוכן (Content).
ה-Padding העליון ותחתון (ריווח בין סקשנים) מוגדר ברמת הסקשן, ו-Padding מימין ושמאל מוגדר ברמת התוכן (Content).
ה-Padding העליון ותחתון (ריווח בין סקשנים) מוגדר ברמת הסקשן, ו-Padding מימין ושמאל מוגדר ברמת התוכן (Content).
אנחנו רוצים להוסיף Max Width ברמת התוכן (Content) או סקשן, כדי לשלוט בגבול העליון של פריסת התוכן.
אנחנו רוצים להוסיף Max Width ברמת התוכן (Content) או סקשן, כדי לשלוט בגבול העליון של פריסת התוכן.
אנחנו רוצים להוסיף Max Width ברמת התוכן (Content) או סקשן, כדי לשלוט בגבול העליון של פריסת התוכן.
בודקים את כל הטווח הרספונסיבי של נקודת שבירה דרך ה- Preview Mode של פריימר, שמאפשר Dynamic Resizing.
בודקים את כל הטווח הרספונסיבי של נקודת שבירה דרך ה- Preview Mode של פריימר, שמאפשר Dynamic Resizing.
בודקים את כל הטווח הרספונסיבי של נקודת שבירה דרך ה- Preview Mode של פריימר, שמאפשר Dynamic Resizing.
2 / טיפוגרפיה
טקסט ברוחב מעל 390 פיקסל יהיה מוגדר ל-Fill Width. אחרת, הוא לא יירד שורה בצורה תקינה במובייל.
טקסט ברוחב מעל 390 פיקסל יהיה מוגדר ל-Fill Width. אחרת, הוא לא יירד שורה בצורה תקינה במובייל.
טקסט ברוחב מעל 390 פיקסל יהיה מוגדר ל-Fill Width. אחרת, הוא לא יירד שורה בצורה תקינה במובייל.
אם טקסט מוגדר ל-Fill, כל ההורים (Parent Containers) שלו צריכים להיות על Height: Fit - כדי שיוכל להגדיל את כל הקונטיינר כשהוא נשבר.
אם טקסט מוגדר ל-Fill, כל ההורים (Parent Containers) שלו צריכים להיות על Height: Fit - כדי שיוכל להגדיל את כל הקונטיינר כשהוא נשבר.
אם טקסט מוגדר ל-Fill, כל ההורים (Parent Containers) שלו צריכים להיות על Height: Fit - כדי שיוכל להגדיל את כל הקונטיינר כשהוא נשבר.
תמיד עדיף להשתמש בסטיילים רספונסיביים לטקסט – יוצרים Text Styles שמאפשרים הגדרות שונות לכל נקודת שבירה.
תמיד עדיף להשתמש בסטיילים רספונסיביים לטקסט – יוצרים Text Styles שמאפשרים הגדרות שונות לכל נקודת שבירה.
תמיד עדיף להשתמש בסטיילים רספונסיביים לטקסט – יוצרים Text Styles שמאפשרים הגדרות שונות לכל נקודת שבירה.
כותרות משתמשות בתגיות H1-H6.
כותרות משתמשות בתגיות H1-H6.
כותרות משתמשות בתגיות H1-H6.
פסקאות טקסט רגילות או כל טקסט אחר שהוא לא כותרת, ישתמש בתגית P.
פסקאות טקסט רגילות או כל טקסט אחר שהוא לא כותרת, ישתמש בתגית P.
פסקאות טקסט רגילות או כל טקסט אחר שהוא לא כותרת, ישתמש בתגית P.
3 / אנימציה ואינטרקציות
אל תוסיפו אפקטים לכל השכבות, תשתמשו באנימציות ותנועה בצורה "עדינה" ומבוקרת.
אל תוסיפו אפקטים לכל השכבות, תשתמשו באנימציות ותנועה בצורה "עדינה" ומבוקרת.
אל תוסיפו אפקטים לכל השכבות, תשתמשו באנימציות ותנועה בצורה "עדינה" ומבוקרת.
באלמנטים אינטרקטיביים עם טקסט בתוכם, תמיד מוסיפים לטקסט User Select: None. כדי למנוע מהמשתמשים לסמן בטעות טקסטים על כפתורים בזמן לחיצה.
באלמנטים אינטרקטיביים עם טקסט בתוכם, תמיד מוסיפים לטקסט User Select: None. כדי למנוע מהמשתמשים לסמן בטעות טקסטים על כפתורים בזמן לחיצה.
באלמנטים אינטרקטיביים עם טקסט בתוכם, תמיד מוסיפים לטקסט User Select: None. כדי למנוע מהמשתמשים לסמן בטעות טקסטים על כפתורים בזמן לחיצה.
אם יש לכם קומפוננטות שנמצאות אחת בתוך השנייה, ה-Transition style & Timing שלהם צריך להיות זהה כדי למנוע אי-סינכרון באנימציה.
אם יש לכם קומפוננטות שנמצאות אחת בתוך השנייה, ה-Transition style & Timing שלהם צריך להיות זהה כדי למנוע אי-סינכרון באנימציה.
אם יש לכם קומפוננטות שנמצאות אחת בתוך השנייה, ה-Transition style & Timing שלהם צריך להיות זהה כדי למנוע אי-סינכרון באנימציה.
מומלץ לשמור על Transition styles זהים או דומים בכל האתר כדי לשמור על עקביות והרגשה אחידה.
מומלץ לשמור על Transition styles זהים או דומים בכל האתר כדי לשמור על עקביות והרגשה אחידה.
מומלץ לשמור על Transition styles זהים או דומים בכל האתר כדי לשמור על עקביות והרגשה אחידה.
בשביל אפקטים של Scroll Transform מומלץ להשתמש רק בטריגר של "Section In View" - כדי לקבל שליטה יותר טובה על התזמון.
בשביל אפקטים של Scroll Transform מומלץ להשתמש רק בטריגר של "Section In View" - כדי לקבל שליטה יותר טובה על התזמון.
בשביל אפקטים של Scroll Transform מומלץ להשתמש רק בטריגר של "Section In View" - כדי לקבל שליטה יותר טובה על התזמון.
4 / נגישות ו-SEO
חייבת להיות רק כותרת H1 יחידה בכל עמוד - ולא יותר.
חייבת להיות רק כותרת H1 יחידה בכל עמוד - ולא יותר.
חייבת להיות רק כותרת H1 יחידה בכל עמוד - ולא יותר.
המדיה שאנחנו מעלים לאתר חייבת להיות מכווצת ככל שאפשר, כדי לא להשפיע לרעה על זמן טעינת האתר. אני ממליץ על Tinypng.com
המדיה שאנחנו מעלים לאתר חייבת להיות מכווצת ככל שאפשר, כדי לא להשפיע לרעה על זמן טעינת האתר. אני ממליץ על Tinypng.com
המדיה שאנחנו מעלים לאתר חייבת להיות מכווצת ככל שאפשר, כדי לא להשפיע לרעה על זמן טעינת האתר. אני ממליץ על Tinypng.com
מומלץ לא להעלות סרטונים לאתר, אלא להשתמש בשירות אחסון חיצוני ולהציג את הסרטון דרך Embed - כדי להסיר את הורדת הסרטון מזמן הטעינה הראשונית של האתר. לאחסון חינמי אני ממליץ להשתמש ב-www.gumlet.com.
מומלץ לא להעלות סרטונים לאתר, אלא להשתמש בשירות אחסון חיצוני ולהציג את הסרטון דרך Embed - כדי להסיר את הורדת הסרטון מזמן הטעינה הראשונית של האתר. לאחסון חינמי אני ממליץ להשתמש ב-www.gumlet.com.
מומלץ לא להעלות סרטונים לאתר, אלא להשתמש בשירות אחסון חיצוני ולהציג את הסרטון דרך Embed - כדי להסיר את הורדת הסרטון מזמן הטעינה הראשונית של האתר. לאחסון חינמי אני ממליץ להשתמש ב-www.gumlet.com.
להקפיד לתת Alt text לכל תמונה באתר לשיפור תוצאות הנגישות ו-SEO. וכשאתם נותנים לתמונה תיאור, תנסו להיות הכי אותנטיים ואמיתיים שאפשר, דמיינו שאדם כבד ראייה שואל אתכם "מה התמונה הזו מראה?" וככה תרשמו.
להקפיד לתת Alt text לכל תמונה באתר לשיפור תוצאות הנגישות ו-SEO. וכשאתם נותנים לתמונה תיאור, תנסו להיות הכי אותנטיים ואמיתיים שאפשר, דמיינו שאדם כבד ראייה שואל אתכם "מה התמונה הזו מראה?" וככה תרשמו.
להקפיד לתת Alt text לכל תמונה באתר לשיפור תוצאות הנגישות ו-SEO. וכשאתם נותנים לתמונה תיאור, תנסו להיות הכי אותנטיים ואמיתיים שאפשר, דמיינו שאדם כבד ראייה שואל אתכם "מה התמונה הזו מראה?" וככה תרשמו.
אם תגדירו 2 תמונות או אלמנטים קרובים עם אותו Alt text - גוגל יתייחס אל זה בצורה שלילית ויעיר.
אם תגדירו 2 תמונות או אלמנטים קרובים עם אותו Alt text - גוגל יתייחס אל זה בצורה שלילית ויעיר.
אם תגדירו 2 תמונות או אלמנטים קרובים עם אותו Alt text - גוגל יתייחס אל זה בצורה שלילית ויעיר.
מאוד חשוב להקפיד על תגיות סמנטיות נכונות במבנה ופריסת העמוד: https://www.framer.com/help/articles/understanding-html-tags/
מאוד חשוב להקפיד על תגיות סמנטיות נכונות במבנה ופריסת העמוד: https://www.framer.com/help/articles/understanding-html-tags/
מאוד חשוב להקפיד על תגיות סמנטיות נכונות במבנה ופריסת העמוד: https://www.framer.com/help/articles/understanding-html-tags/
הגדרות ה- Meta Title \ Meta Description ברמת הדף צריכות להיות מדויקות לאסטרטגית ה-SEO שלכם, ולא לשכוח להגדיר Social Link Previews.
הגדרות ה- Meta Title \ Meta Description ברמת הדף צריכות להיות מדויקות לאסטרטגית ה-SEO שלכם, ולא לשכוח להגדיר Social Link Previews.
הגדרות ה- Meta Title \ Meta Description ברמת הדף צריכות להיות מדויקות לאסטרטגית ה-SEO שלכם, ולא לשכוח להגדיר Social Link Previews.
אם האתר שלכם פונה למדינות אירופה, אתם מחויבים להוסיף באנר Cookies ע"פ חוק, בישראל - עדיין לא חייבים.
אם האתר שלכם פונה למדינות אירופה, אתם מחויבים להוסיף באנר Cookies ע"פ חוק, בישראל - עדיין לא חייבים.
אם האתר שלכם פונה למדינות אירופה, אתם מחויבים להוסיף באנר Cookies ע"פ חוק, בישראל - עדיין לא חייבים.
כפתורים עם לינק עליהם, יקבלו אוטומתית את התגית <a> - אבל לכפתורים שמפעילים אינטרקציה נצטרך להגדיר ידנית כ- <button>
כפתורים עם לינק עליהם, יקבלו אוטומתית את התגית <a> - אבל לכפתורים שמפעילים אינטרקציה נצטרך להגדיר ידנית כ- <button>
כפתורים עם לינק עליהם, יקבלו אוטומתית את התגית <a> - אבל לכפתורים שמפעילים אינטרקציה נצטרך להגדיר ידנית כ- <button>
מומלץ להעביר את האתר דרך https://wave.webaim.org כדי לקבל הערות בזמן אמת על כל בעיות הנגישות וסמנטיקה בעמוד. [חלק אינטרגלי מהתהליך שלי]
מומלץ להעביר את האתר דרך https://wave.webaim.org כדי לקבל הערות בזמן אמת על כל בעיות הנגישות וסמנטיקה בעמוד. [חלק אינטרגלי מהתהליך שלי]
מומלץ להעביר את האתר דרך https://wave.webaim.org כדי לקבל הערות בזמן אמת על כל בעיות הנגישות וסמנטיקה בעמוד. [חלק אינטרגלי מהתהליך שלי]
5 / טיפס אנד טריקס
לכיווץ תמונות, אני ממליץ לייצא מפיגמה ב-x1.5 מהגודל האמיתי שבו היא הולכת להופיע בקנבס - אם האלמנט הוא תמונה עם הרבה פרטים קטנים או שקיפות, לייצא כ-PNG, אחרת עדיף JPG לחיסכון במשקל. - לאחר מכן להעביר דרך TinyPNG.com
לכיווץ תמונות, אני ממליץ לייצא מפיגמה ב-x1.5 מהגודל האמיתי שבו היא הולכת להופיע בקנבס - אם האלמנט הוא תמונה עם הרבה פרטים קטנים או שקיפות, לייצא כ-PNG, אחרת עדיף JPG לחיסכון במשקל. - לאחר מכן להעביר דרך TinyPNG.com
לכיווץ תמונות, אני ממליץ לייצא מפיגמה ב-x1.5 מהגודל האמיתי שבו היא הולכת להופיע בקנבס - אם האלמנט הוא תמונה עם הרבה פרטים קטנים או שקיפות, לייצא כ-PNG, אחרת עדיף JPG לחיסכון במשקל. - לאחר מכן להעביר דרך TinyPNG.com
עדיף כמה שאפשר להימנע מערכי Blur יותר גבוהים מ-20 פיקסל, במיוחד אצל אצלמנטים חוזרים ובמיוחד בעמוד הראשי של האתר - במכשירים יותר ישנים זמן העיבוד של האפקט יהיה יחסית גבוה.
עדיף כמה שאפשר להימנע מערכי Blur יותר גבוהים מ-20 פיקסל, במיוחד אצל אצלמנטים חוזרים ובמיוחד בעמוד הראשי של האתר - במכשירים יותר ישנים זמן העיבוד של האפקט יהיה יחסית גבוה.
עדיף כמה שאפשר להימנע מערכי Blur יותר גבוהים מ-20 פיקסל, במיוחד אצל אצלמנטים חוזרים ובמיוחד בעמוד הראשי של האתר - במכשירים יותר ישנים זמן העיבוד של האפקט יהיה יחסית גבוה.
אם אתם משתמשים ב-Full Screen Menu במובייל שלכם, תוסיפו את הקומפננטה שעוצרת גלילה ברקע מהאתר שלי - לחוויה איכותית יותר.
אם אתם משתמשים ב-Full Screen Menu במובייל שלכם, תוסיפו את הקומפננטה שעוצרת גלילה ברקע מהאתר שלי - לחוויה איכותית יותר.
אם אתם משתמשים ב-Full Screen Menu במובייל שלכם, תוסיפו את הקומפננטה שעוצרת גלילה ברקע מהאתר שלי - לחוויה איכותית יותר.
שימו לב לעשות Override ל-Padding שלכם בנקודות שבירה של הטבלט ומובייל - ההמלצה שלי: [מובייל 12~18px] [טבלט: ~40px]
שימו לב לעשות Override ל-Padding שלכם בנקודות שבירה של הטבלט ומובייל - ההמלצה שלי: [מובייל 12~18px] [טבלט: ~40px]
שימו לב לעשות Override ל-Padding שלכם בנקודות שבירה של הטבלט ומובייל - ההמלצה שלי: [מובייל 12~18px] [טבלט: ~40px]
תמיד תבדקו שניגודיות צבעי הטקסטים שלכם באתר תקינים, גוגל מאוד מקפידים על הנושא.
תמיד תבדקו שניגודיות צבעי הטקסטים שלכם באתר תקינים, גוגל מאוד מקפידים על הנושא.
תמיד תבדקו שניגודיות צבעי הטקסטים שלכם באתר תקינים, גוגל מאוד מקפידים על הנושא.
מומלץ שמידע חשוב לא יהיה "מוסתר" בתוך קומפוננטות ונגלה רק בלחיצה [כמו סקשני FAQ] - הבוטים של גוגל לא יוכלו לקרוא ולהתייחס אליהם.
מומלץ שמידע חשוב לא יהיה "מוסתר" בתוך קומפוננטות ונגלה רק בלחיצה [כמו סקשני FAQ] - הבוטים של גוגל לא יוכלו לקרוא ולהתייחס אליהם.
מומלץ שמידע חשוב לא יהיה "מוסתר" בתוך קומפוננטות ונגלה רק בלחיצה [כמו סקשני FAQ] - הבוטים של גוגל לא יוכלו לקרוא ולהתייחס אליהם.
בפריימר, תמונות מכווצות אוטומתית לפורמט AVIF ומקבלות Lazy Load בצורה גורפת - אבל זה לא תחליף לכיווץ תמונות בצורה תקינה לפני שמעלים לאתר!
בפריימר, תמונות מכווצות אוטומתית לפורמט AVIF ומקבלות Lazy Load בצורה גורפת - אבל זה לא תחליף לכיווץ תמונות בצורה תקינה לפני שמעלים לאתר!
בפריימר, תמונות מכווצות אוטומתית לפורמט AVIF ומקבלות Lazy Load בצורה גורפת - אבל זה לא תחליף לכיווץ תמונות בצורה תקינה לפני שמעלים לאתר!
מומלץ להיות עם היד על הדופק עם העדכונים הרשמיים של פריימר, הם מוציאים שיפורים ועדכונים ממש עוצמתיים מדיי שבוע ~ חודש.
מומלץ להיות עם היד על הדופק עם העדכונים הרשמיים של פריימר, הם מוציאים שיפורים ועדכונים ממש עוצמתיים מדיי שבוע ~ חודש.
מומלץ להיות עם היד על הדופק עם העדכונים הרשמיים של פריימר, הם מוציאים שיפורים ועדכונים ממש עוצמתיים מדיי שבוע ~ חודש.