12 extensions that will make any UX Designer’s life easier
If a person has only 15 minutes to spend on content, around 75% prefer to read a page with good design over reading something without much pizzazz.
Designers seem to intrinsically understand this fact and will spend hours getting coloring and spacing just right.
Fortunately, there are a number of tools that will make any UX designer’s life easier and speed up the process a bit. Here’s an even dozen for you to check out.
1. Window Resizer
Today’s UX designers understand that different people access the internet on different screen sizes, including smaller devices like smartphones.
The Window Resizer Chrome browser extension allows you to quickly adjust your screen size to see how a screen will look on different devices. This is vital for developing the best user experience possible.
2. MultiClipboard
Designing means doing a lot of coding work. When coding, designers tend to copy and paste from one place to the next. You might grab some code from a design you completed last year with a specific element or you might look up code and grab it. You might also be in the process of debugging and need to get some feedback on some copied-and-pasted code.
The MultiClipboard plugin makes it easy to have several clipboards going at one time so you can easily grab a bit of code from here and paste it into a different notepad file.
3. AutoSave
You’ve just spent an hour coding a particularly challenging piece of PHP when your laptop battery runs down and your computer shuts off. And you thought you had it plugged in! If you’ve remembered to hit Ctrl/S over and over again, you’ll be fine. However, if you forgot, you will have to start over.
Unless, that is, you’ve already downloaded the Notepad plugin called AutoSave. AutoSave automatically saves your work every so many seconds so you don’t have to worry about losing vital coding and having to start over from scratch. In a pinch, this plugin can really save you both frustration and time.
4. HTML2WordPress
Do you have a static HTML website that you’d like to convert to WordPress? In the past, this has been a real headache. <div> tags and other issues crop up with conversion and can take hours upon hours to debug. On top of that, HTML coding doesn’t always translate well into PHP and you’re left with strange-looking conversions that might not be very user-friendly.
That’s where the HTML2WordPress plugin comes into play. HTML2WordPress takes your static coding and converts it into WordPress language, making the process of converting your website much easier.
5. Brackets Extensions
You may already be using Brackets software to more easily code, but did you know there are numerous extensions for Brackets that can save you even more time on coding tasks?
For example, you can use the Autoprefixer, which will add vendor prefixes via support data from your browser and help you figure out on-the-fly if a specific prefix is needed and can be used. In addition, the extension will take out any vendor prefixes that aren’t needed and clean up your code.
6. Monster Widget
When you’re in the middle of designing a new WordPress site, you may want to test out a number of different plugins to see what gives you the look and function you need. However, this can be extremely time-consuming, as you will have to add and remove widgets over and over.
With Monster Widget, you can see at-a-glance the impact different widgets will have on a theme’s look.
7. What Font
Did you see a font on another website that you loved and really want to replicate in one of your designs? There are so many fonts these days that it can be difficult to know 100% which font another site is using.
However, if you download the What Font Chrome extension, you can simply click on the text on the page and find out what font is being used. This allows you to incorporate the look of text you really love into a fresh, new design all your own.
8. PSD to WordPress
Do you have a design you created in Photoshop that you want to easily move over to WordPress? Fortunately, Photoshop has an extension that allows you to easily convert so that everything is coded perfectly for WP.
PSD to WordPress speeds up the process and allows you to design once and then convert easily without additional hours spent coding and recoding files.
9. Spectrum
When designing a website, you want the colors to look just so. However, one thing that’s easy to forget is that there are people out there with visual challenges who might not be able to see your site the way you think they will. This can include visual impairment or color blindness.
Spectrum allows you to see the website you’re creating through their eyes. You simply use the extension and you can see how different colors look and whether or not there’s enough contrast for someone who has a color vision deficiency.
10. CSS3 Generator
Some coding tasks are straightforward and easy, but some are more complex. Finding shortcuts can save you a ton of time. The CSS3 Generator is a Chrome app that allows you to create different snippets of CSS code, such as grabbing Hex/RGBA coding or creating CSS columns.
11. Check My Links
Checking links within your design might sound simplistic, but it can greatly impact user experience if links are broken. It’s time-consuming to click on each link, make sure the page loaded, etc.
Check My Links works with Chrome. You simply start Check My Links and the plugin will crawl through the links on your website and report any broken links. This is also a smart thing to utilize from time to time as you update your site or a bit of time passes to make sure everything is still functional for the user.
12. Eye Dropper
Sometimes you see a color on another website that you fall in love with. While you don’t want to copy another design, inspiration from a particular color is common.
You could screen-capture the page, plug the screenshot into a photo editor and use the eye dropper tool to try to figure out what the exact formulation of the color is, but that’s time-consuming and not always accurate.
Another option is to download the Eye Dropper Chrome extension. With this extension, you just click on the color on the actual site and you will find out the exact color. You can then use it in your design or avoid it like the plague if you hate it.
These extensions will make your life as a designer a bit easier and speed up the time it takes you to code. There are many other extensions out there, but these 12 will give you a good start.
