תוספים לדפדפן יכולים לחסוך לכם כמעצבים זמן יקר ולהקל על העבודה שלכם בדרכים שונות. במאמר הבא סקרתי 11 תוספים בהם אני משתמש כמעט באופן יומיומי במהלך העבודה שלי ב-Poptin:
מוזלי הוא מאותם תוספים שהם בגדר חובה לכל מעצב בשנת 2018, אני באופן אישי משתמש בו בכל יום לפני תחילת יום העבודה. אז על מה מדובר? במצב הרגיל של הכרום, ברגע שפותחים לשונית חדשה, מופיעה שורת חיפוש של גוגל ואתרים שביקרתם בהם לאחרונה, muzli מחליף את לשונית ברירת המחדל ובמקום זה מציג ממשק מרשים עם חדשות בנושא עיצוב וטכנולוגיה והשראות עיצוביות. אתם למעשה קובעים מאיזה אתרים מוזלי ישאב את התוכן שלו, אם אתם יותר בעניין של השראה תוכלו להגדיר לו אתרים כמו dribble, awwwrds ו־Behance, אם אתם יותר בעניין של עדכונים תוכלו להגדיר בלוגים כמו Wired, הבלוג של Invision ועוד.
CSS Peeper
CSS Peeper כשמו, מאפשר לכם "להציץ" לתוך ה־CSS של האלמנטים השונים באתר ולקבל מידע רלוונטי כמו: סוג הפונט, קוד הצבע, גודל הפונט, סוג התגית (h1, h2, p) ואת גודל ה־Div שהאלמנט ממוקם בתוכו.
ColorPick Eyedropper
תוסף פשוט וסופר שימושי – דוגם צבע לדפדפן. תוכלו לייצא את ערכי הצבע כקוד Hex,RGB וHSL 🙂
Page Ruler
אחד התוספים שאני משתמש בו הכי הרבה, עם Ruler אפשר למדוד גדלים של אלמנטים שונים על המסך ולקבל את הערכים של המרחקים שלהם מקצוות המסך.
Loom
לא ממש תוסף ייעודי למעצבים אבל תרומתו יכולה להיות ענקית. Loom הוא בעצם תוסף לצילום וידאו של המסך, ניתן להגדיר לו לצלם רק בלשונית מסויימת בדפדפן או בכל המחשב, כמו כן בנוסף להקלטת המסך תוכלו להוסיף צילום וידאו שלכם מדברים. אחרי שהקלטתם את העבודה תוכלו לשלוח קישור פשוט לצפייה בסרטון. היתרון הענק בלום הוא המהירות והקלות שבה תוכלו להקליט מסך עם הסבר ולשתף אותו בקלות.
Visual Inspector by CanvasFlip
קאנבה פליפ דומה ל – CSS Peeper שהזכרתי מוקדם אבל הוא נותן לנו עוד הרבה אפשרויות בנוסף:
- הצגת כל סוגי הפונטים והמאפיינים שלהם הקיימים בעמוד.
- הצגת כל הצבעים והערכים שלהם הקיימים בעמוד.
- הצגת גודל ה־Div שהאלמנט יושב הנבחר יושב בתוכו.
- אפשרות לייצא תמונות וטקסטים (בתור תמונה)
- ייתן לכם אפשרות לשנות באתר עצמו את הטקסטים, גודל, צבע, שקיפות וכו'…
FireShot
תוסף זה יאפשר לכם ליצור צילום של כל האתר ולייצא אותו בתור תמונה או PDF.
Window Resizer
רוצים לבדוק את הרספונסיביות של אתר מסוים? Window Resizer מאפשר לכם להציג את האתר לפי רזולוציות נפוצות למובייל ולדסקטופ או להכניס את הרזולוציה באופן ידני.
Pinterest Save Button
יש לכם חשבון פינטרסט ונתקלתם בתמונות מעוררות השראה באחד מבלוגי העיצוב? לחיצה על התוסף תכניס אתכם למסך שיציג את כל התמונות בעמוד ותוכלו לבחור את התמונות שתרצו להוסיף לבורדים שלכם בפינטרסט.
Site palette
ל־Site Palette המון אפשרויות, תחילה הוא עובר על עמוד האינטרנט שאתם נמצאים בו ויוצר פלטות צבעים שונות על סמך הצבועניות בעמוד. בלשונית חדשה הוא יציג את הפלטות השונות ואז תוכלו לשתף עם כל אחד קישור לעמוד הפלטות הזה.
בנוסף, במידה ומצאתם פלטה מסויימת שמצאה חן בעיניכם, יש מספר דברים שתוכלו לעשות:
- לשמור את הפלטה כקובץ .sketch שניתן לפתוח ב־Sketch, Figma ו־Adobe XD
- ניתן לשמור אותו כקובץ ASE (סווצ'ז לתוכנות Adobe השונים)
- ולחפש באופן אוטומטי ב־Google Arts תמונות מבוססות צבע של הפלטה הנבחרת
pic2pixlr
אז קודם כל pixlr הוא עורך תמונות אונליין סטייל Photoshop רק הרבה יותר בסיסי, היתרון הגדול שלו שהוא מאוד מהיר ונוח לשימוש. הרבה פעמים אם אני צריך לשנות רזולוציה לתמונה, לעשות לה קרופ, או עריכה בסיסית, במקום לפתוח פוטושופ ולחכות שהוא יטען אני פשוט פותח pixlr בדפדפן ועורך את זה שם. אתם יכולים לקרוא עוד על pixlr ותוכנות עריכה ליצירת עיצובים מקצועיים בפוסט הזה.
אז מה בעצם pic2pixlr עושה? קליק ימני על כל תמונה (גם בגוגל תמונות!) תאפשר לכם לפתוח אותה באופן מידי בpixlr ולערוך אותה. רק שימו כמובן לזכויות היוצרים של התמונה.
