תמיד הרגשתי שאין לי “עין לעיצוב”.
“אני יודע שזה נראה נורא, אבל אין לי מושג למה.”
כשחיפשתי את ה”עין לעיצוב” הזו, שמתי לב שגולשים רבים ב-Reddit ממליצים על הספר “Refactoring UI” כפתרון.
הנחת היסוד של הספר היא שאתם לא צריכים כישרון מיוחד כדי לגרום לעיצובים להיראות יפים. יש רק חוקים שצריך לפעול לפיהם.
אז קראתי את הספר. הדעה שלי?
הספר מספק מעבר לציפיות, וכל מי שאינו מעצב צריך לקרוא אותו.
אם אין לכם זמן לקרוא אותו, הנה לקחים מהירים מהספר שיעזרו לכם לשפר את האתר שלכם.
1. התחילו עם עט ונייר
אל תחשבו על צבעים או גופנים כשמתחילים מאפס.
חשבו על הפיצ’ר (מה האתר צריך לעשות?) ושרטטו פריסה.
קל יותר להמשיך כשיש לכם מבנה בראש.
2. כמה עגול צריך להיות רדיוס הגבול?
רדיוס גבול גדול יותר הוא יותר שובב, בעוד שבלי גבול זה יותר רציני.
3. עצבו עם פחות
יותר מדי אפשרויות משתק.
כשיש לכם פחות, קבלת ההחלטות הופכת לקלה יותר. אין לכם הרבה לבחור מתוך, אז נעשים יותר יצירתיים.
החליטו על שתי גופנים. בחרו צבע ראשי אחד. השתמשו במקור תמונות אחד.
אז התחילו לעבוד, ראו מה תוכלו לעשות עם זה.
4. הדגישו דרך הפחתת דגש
צריכים להדגיש פריט נבחר בתפריט? אל תגדילו את הניגודיות שלו.
לפתרון אלגנטי יותר, הפחיתו דגש מהאלמנטים סביבו.
5. תוויות הן מוצא אחרון
אם משהו מובן מאליו, אל תשתמשו ביותר מילים כדי לתאר אותו.
תוויות לרוב מיותרות.
אם הקורא יכול להבין שהוא קורא “שם” או “אימייל”, אל תוסיפו תווית 👇🏽
6. היו עם מערכת
לפני שתעצבו משהו, וודאו שיש לכם את כל אבני הבניין.
- השתמשו ב-Typescale לטיפוגרפיה עקבית.
- צרו פלטת צבעים טובה.
- הכינו נכסים ותמונות: איכות גבוהה ודחוסות.
- היו עם מערכת גדלים לשאר האלמנטים.
העיצוב יהיה קל יותר כשכל דבר מוגדר.
7. חוקים מהירים לגובה שורה
- גודל גופן גדול יותר = גובה שורה קטן יותר
- שורת טקסט ארוכה יותר = גובה שורה גדול יותר
8. יישור שמאל >> מרכז
“אם משהו ארוך יותר משתיים עד שלוש שורות, כמעט תמיד ייראה טוב יותר מיושר לשמאל.”
9. 🎨 HSL עדיף על Hex
ב-Hex, צבעים שנראים אותו הדבר ויזואלית לא נראים אותו הדבר בקוד.
“HSL פותר זאת על ידי ייצוג צבעים באמצעות תכונות שהעין האנושית תופסת באינטואיציה: גוון, רוויה ובהירות.”
10. השתמשו בתמונות טובות
איכות התמונות יכולה לעשות או לשבור את האתר שלכם.
אפילו אם העיצוב מדהים, תמונות גרועות יהרסו אותו.
כדי לתקן זאת, השתמשו באתר תמונות סטוק איכותי.
11. איך להשתמש בטקסט על תמונות
הוסיפו שכבת כיסוי.
כך עוברים מ:
ל:
12. אל תקטינו צילומי מסך.
אם אתם משתמשים בצילומי מסך להצגת המוצר שלכם, אל תקטינו אותם כדי שיתאימו לעיצוב:
במקום זאת, צלמו מסך בגודל מסך קטן. זה ייראה טוב יותר.
13. השתמשו בנגיעת צבע המפורסמת
השתמשו בנגיעת צבע בכמה מקומות כדי לגרום לאלמנטים להיראות טוב יותר.
14. איך להתאמן ולהשתפר
שחזרו דוגמאות טובות בעצמכם.
“הדרך המוחלטת הטובה ביותר לשים לב לפרטים הקטנים שגורמים לעיצוב להיראות מלוטש באמת היא לשחזר את אותו עיצוב מאפס, בלי להציץ בכלי המפתחים.”
מצאו עיצובים נהדרים ונסו לבנות אותם בעצמכם.
אם אתם צריכים מקום לקבל דוגמאות עיצוב טובות, בשבוע הבא אשתף את כל ספריית ה-Notion שלי לאיסוף השראה.
