הוסיפו חיים לעבודה העיצובית שלכם- 7 תוספי פיירפוקס יעילים למעצבים

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

1- Firebug הכלי שמעצבי ווב לא יכולים לחיות בלעדיו

לכרום ודפדפנים אחרים ניתן להשתמש בפיירבאג לייט או בכלי מובנה של התוכנה (בדרך כלל קליק ימני ואז לחיצה על Inspect element אם קיימת אופציה כזו).
פיירבאג מהווה תוסף חיוני לכל מי שבעבודתו מתעסק עם Html, CSS, או אפילו JavaScript.
הכלי מאפשר לך לבחון ולערוך את הקוד של דף מסוים, תוך כדי צפייה בשינויים שקורים בזמן אמת.

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

לי אישית גם קרה שלקוח פנה אליי לעיצוב מחדש של האתר שלו, ורצה לדעת איך אני יכול לשפר לו את מראה האתר. על מנת להדגים לו כמה רעיונות שעלו לי באותו רגע, פתחתי את האתר שלו בפיירפוקס שלי והתחלתי לשנות דברים ב-live  עם הפיירבאג. שיניתי לו את העיצוב של האתר (זמנית כמובן) בדקה של התעסקות מינימלית בhtml וה-css באמצעות פיירבאג.
הלקוח התרשם ממש והופתע לגלות את השינויים בזמן אמת, בעוד שבשבילי זה היה ברור מאליו – הרי זה מה שפיירבאג עושה.

לעמוד התוסף של פיירבאג

[sep]

2 – Web Developer Toolbar

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

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

לעמוד התוסף של web developer

[sep]

3- Colorzilla

כלי איידרופר (פיפטה) שימושי וידידותי אשר מאפשר לנו לדגום בקלות כל צבע שאנו רואים בדפדפן.
לוחצים על אייקון קטן בחלון הדפדפן כדי להפעיל אותו ואז העכבר שלנו בעצם הופך לפיפטה קטנה שבלחיצת עכבר פותחת חלון קטן עם שם הצבע ואוטומטית שומרת אותו בקליפבורד שלנו על מנת שנעשה ישירות paste לתוכנה עימה אנו עובדים.
לא עובדים בrgb? אין בעיה, ניתן לדפדף באותו חלון קטן בין סוגי צבעים- rgb, hex cmyk ועוד..
למה זה יעיל? דוגמה אחת היא כאשר אתם רואים צבעוניות שממש אהבתם ורוצים להשתמש בה בעיצוב שלכם. דגימה קלה יכולה להיות יותר מהירה מלעשות print screen או כל דבר אחר בסגנון.
דוגמה נוספת היא כאשר אתם עובדים על מותג כלשהו אשר מבקש מכם להשתמש בצבע המקורי של התדמית שלו בעיצוב שלכם (ובמידה ואינו שולח לכם סטייל גייד או ערכים של הצבע). אין צורך לנחש.. פותחים  לשניה את הדפדפן, מוצאים חומר שיווקי של הלקוח וממנו דוגמים את הצבע הרצוי. רצוי לוודא כי התמונה ממנה אתם דוגמים הינה ברזולוציה טובה.

לעמוד התוסף של בolorzilla

[sep]

4- Screengrab

כלי מצוין ליצירת צילומי מסך מהדפדפן.
בלחיצת כפתור על האייקון של סקרין גראב נפתח תפריט קטן ובו שתי אפשרויות – שמירה, או copy (כלומר העתקה לקליפבורד).
בכל אחת משתי האופציות הללו יש אפשרות לצלם רק חלק נבחר מהמסך, רק את הקטע במסך שאנו רואים ברגע נתון, או את כל הגלילה של אותו דף (שזאת האופציה שאני משתמש בה הכי הרבה).
דוגמה לשימוש: נניח ואתם רוצים לעצב מחדש דף פייסבוק.
– פותחים את דף הפייסבוק בדפדפן (עם תמונת הפרופיל של החברה והכל).
– לוחצים על האייקון של screengrab.
– בוחרים ב-copy entire page.
– פותחים פוטושופ: file → new.
– עושים paste לתוך המסמך.
– שמים מסכה על הדף הישן ומתחילים לעבוד…

לעמוד התוסף של screengrab

[sep]

5- hootsuite

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

דוגמה לחלון של hootsuite
דוגמה לחלון של hootsuite

לעמוד התוסף של hootsuite

[sep]

6- Delicious

למי שלא מכיר, Delicious הינה אחת מהרשתות החברתיות המובילות בעולם, וכמעצבים היא ממש ממש יעילה. רובכם וודאי מכירים אותה כבר, אבל מידי פעם יוצא לי להיתקל במעצבים שלעולם לא שמעו עליה ולכן אכתוב רקע קצר עליה.
בשונה מרשתות חברתיות אחרות Delicious היא פלטפורמה לשיתוף אתרים. בעצם משהו שמחליף לכם את ה"מועדפים" בדפדפן. האתר הוקם כבר בשנת 2003 ומונה מעל 5 מיליון משתמשים רשומים ומעל 150 מיליון לינקים מועדפים שנרשמו.

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

למה דווקא delicious?
– זהו שירות מקוון שניתן לגשת אליו מכל מחשב. גם אם אני בחו"ל או בעבודה.
– שימוש ב-tags לקטלוג הקישורים שאנו שומרים, במקום השיטה המסורבלת של התיקיות.
– שטח אחסון בלתי מוגבל לקישורים.
– אפשרות לשיתוף המועדפים ברשת עם חברים ומשתמשים אחרים – גם דרך רשתות חברתיות אחרות כמו פייסבוק, וגם באמצעות וויג'טים לאתרים ובלוגים. זה היתרון הענק של דלישס. אם אני משתף קישור על אתר מדליק, גם מעצבים אחרים יכולים לראות אותו, ולהפך.

איך מתחילים?
נרשמים באתר, מורידים את התוסף לדפדפן, ומתחילים לתייג אתרים. ממש פשוט.
הנה קישור לסרטון מעולה וקריאטיבי להסבר על השירות של דלישס.
http://youtu.be/HeBmvDpVbWc

לעמוד התוסף של delicious

[sep]

7- wisestamp

תוסף לפיירפוקס אשר מוסיף באופן אוטומטי חתימה מתוחכמת לאימיילים שלנו בג'ימייל. ניתן להשתמש בתבנית שלהם לחתימה או ליצור חתימה שלמה ב-Html.

הנה החתימה בה אני משתמש כעת –

דוגמה לחתימה בwisestamp
דוגמה לחתימה בwisestamp

ניתן לקרוא עוד על wisestamp באתר הרשמי שלהם.

לעמוד התוסף של wisestamp

[sep]

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

ולסיום – ידעתם שיש באמת חיה כזאת? פיירפוקס?
הנה וידאו מתוך פרוייקט הfirefox live שהרימה חברת Mozilla בסוף שנת 2010.
http://youtu.be/pLej-ZPRBNU

האתר של הפרוייקט כבר לא באויר, אבל למי שמעוניין לראות עוד ולהתעניין לגבי היצורים החמודים האלו מוזמן לבקשר באתר של Red Panda Network

 

Share

קצת על המחבר:

שגיא שרייבר מעצב UI & UX, מייסד של פיקסל פרפקט מגזין, וקו-מייסד של הסטרטאפ Tapdog למעקב אחר אתרים ותחרות ברשת. בוגר שנקר במגמה לעיצוב מדיה אינטראקטיבית. מתמחה בעיצוב אתרים מונחי conversion (המרה) וחווית משתמש, ובעל ידע נרחב ב-html, css ו- wordpress. ניתן למצוא את שגיא  בפורטפוליו שלובטוויטרבלינקד אין או מכדרר בדריבל.

תמצאו את שגיא שרייבר ב:

מאמרים שעשויים לעניין אותך

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

הצטרפו לניוזלטר שלנו!

הרשמו לניוזלטר של פיקסל פרפקט וקבלו למייל רשימת קריאה חשובה לתחום מדי שבוע

אשמח לשלוח לך פרטים!

אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה
;