סטודיו mispel
הבלוג (41)
המאמרים של הסטודיו, בעברית ועם מקורות: חוויית משתמש, עיצוב ממשק, פיגמה, אפיון, ממשקים מימין לשמאל ונגישות.
UX ו-UI
העקרונות, השיטות והמונחים של חוויית משתמש ועיצוב ממשק.
- מה זה UX? חוויית משתמש בהסבר פשוטההגדרה של חוויית משתמש, מה היא כוללת ומה היא לא.
- מה זה UI? עיצוב ממשק משתמשמה כולל עיצוב ממשק משתמש, ועל אילו עקרונות הוא נשען.
- UX ו-UI: מה ההבדל?ההבדל בין חוויית משתמש לעיצוב ממשק, בטבלה אחת.
- מחקר UX: איך לומדים מי המשתמשיםשיטות מחקר משתמשים, ומתי להשתמש בכל אחת.
- פרסונות: לתת למשתמש פניםמה זו פרסונה, ואיך בונים אותה מתוך מחקר.
- מפת מסע משתמש (User Journey Map)ממה בנויה מפת מסע משתמש ואיך משרטטים אותה.
- ארכיטקטורת מידע (Information Architecture)איך בונים ובודקים את מבנה התוכן של אתר.
- וויירפריים: השלד של המסךוויירפריים, מוקאפ ואב טיפוס, ומתי משתמשים בכל אחד.
- בדיקת שמישות: לצפות באנשים משתמשיםאיך מתכננים ומריצים בדיקת שמישות, וכמה משתתפים צריך.
- סקירה היוריסטית: איך עושים בדיקת UX לאתרעשר ההיוריסטיקות של נילסן, ואיך מריצים סקירת UX לאתר.
- מערכת עיצוב: שפה אחת לכל המוצרממה בנויה מערכת עיצוב ומתי כדאי לבנות אחת.
- UX writing: המילים שבממשקאיך כותבים כפתורים, הודעות שגיאה ומיקרוקופי בעברית.
פיגמה בעברית
פיגמה צעד אחר צעד, בעברית, כולל כל מה שמשתנה כשמעצבים מימין לשמאל.
- מתחילים בפיגמהדפדפן או אפליקציה, הכרת הממשק והקובץ הראשון בפיגמה.
- Frames ו-Constraints בפיגמהההבדל בין Frame ל-Group, וכללי Constraints לשינוי גודל.
- Auto Layout בפיגמהכיוונים, ריווח, Hug ו-Fill, וטיפים ל-Auto Layout בעברית.
- קומפוננטות ו-Variants בפיגמהMain component, Instance, Variants ו-Component properties.
- Styles ו-Variables בפיגמהההבדל בין Styles ל-Variables, Collections ו-Modes.
- פרוטוטייפ בפיגמהTriggers, Actions, Smart animate, Overlays והצגת הפרוטוטייפ.
- Dev Mode בפיגמהבדיקת מידות וקוד, Ready for dev, Code Connect ו-MCP.
- פיגמה בעברית ומימין לשמאלמה עובד מובנה בעברית, מה לא, ואיך עובדים מסביב.
- תוספים לפיגמהאיך מריצים תוספים, ותוספים שימושיים מקהילת פיגמה.
- FigJam: הלוח השיתופי של פיגמהלוח שיתופי לסדנאות, מחקר ותרשימים, כולל כלי AI.
- קיצורי מקלדת בפיגמהטבלת קיצורים ל-Windows ול-Mac, לפי נושאים.
- מחירי פיגמה: איזו תוכנית מתאימה לכםStarter, Professional, Organization, Enterprise ותוכנית החינוך.
אפיון
איך כותבים אפיון לאתר ולמערכת, עם תבנית שאפשר להעתיק.
- אפיון אתר: המדריך המעשימה זה אפיון אתר, מה נכנס בו ואיך כותבים אחד שבאמת משתמשים בו.
- אפיון מערכת: איך מתארים מערכת לפני שבונים אותהדרישות, הרשאות, מצבים וקריטריוני קבלה למערכות ולאפליקציות.
- זרימת משתמש: התהליך לפני המסכיםאיך משרטטים את הצעדים של המשתמש ואת תגובות המערכת.
- תבנית אפיון להעתקהתבנית מלאה, סעיף אחר סעיף, מוכנה להעתקה למסמך שלכם.
עיצוב RTL
ממשק בעברית: כיווניות, גופנים, מספרים, טפסים ונגישות.
- מדריך עיצוב RTL לממשקים בעבריתמה מתהפך בממשק עברי, מה נשאר במקום, ואיך מגדירים את זה נכון בקוד ובעיצוב.
- גופנים עבריים לממשק משתמשHeebo, Assistant, Rubik ועוד: גופנים עבריים חופשיים לממשק, עם משקלים ורישיון.
- מספרים, תאריכים וטקסט מעורב בעבריתתאריכים, שקלים, טלפונים ואנגלית בתוך עברית: איך הדפדפן מסדר אותם ואיך מתקנים.
- טפסים בעבריתשדות טלפון, ת"ז, מייל וכתובת בטופס עברי, ואיך כותבים הודעות שגיאה.
- אייקונים והיפוך במראה בממשק עבריחצים, ניווט, ניגון ושעונים: אילו אייקונים מתהפכים בממשק עברי.
- נגישות אתרים בישראל: מה החוק דורשהתקנות, ת"י 5568, הצהרת נגישות, רכז נגישות ופטורים: מה החוק בישראל דורש מאתרים.
- צ'קליסט נגישות אתרים (WCAG AA)רשימת בדיקה לנגישות ברמה AA, כולל בודק ניגודיות צבעים.
קריירה
איך נכנסים לתחום: לימודים, תיק עבודות ומה מחפשים במעצבים.
- איך נהיים מעצבי UXכישורים, דרכי כניסה ומה מבקשים במשרות ג'וניור.
- תיק עבודות UX: מה להראות ואיךכמה פרויקטים, מה בכל קייס סטאדי, ואיזה פורמט לבחור.
- איך בוחרים קורס UX UIשאלות לבדיקת כל קורס: סילבוס, פרויקטים, מנחים, הבטחות ותנאי ביטול.
- לימודי UX UI אקדמיים בישראלתארים ותוכניות אקדמיות ב-UX ו-HCI, עם קישור רשמי לכל אחת.
English
מאמרים שכתבנו בסטודיו באנגלית.
- UI Design: What is it and how does it affect us?The digital world has become an integral part of our lives. We spend countless hours in front of screens, whether it's on a computer, smartphone, or tablet. Every time we use a digital product, we interact with it through the user interface, or UI for short.
- Why is it Important to Conduct UX Characterization and Design Before Product Development?In today's competitive market, the success of a digital product is not a given. Many entrepreneurs invest considerable time and resources into developing new products, only to find that they are not adopted by users. One of the main reasons is the lack of attention to user experience (UX) characterization and design in the early stages of product development.
Frame / Contact
צריכים את זה בפרויקט שלכם?
את מה שאנחנו כותבים בבלוג אנחנו עושים בפרויקטים: אפיון, עיצוב UX/UI, ממשקים בעברית ונגישות.