9 Free Design Tools for Better Web Development
100% of our design leads recommend these tools. (Ok, Thomas is our only design lead at Mighty Ant, but if you do any kind of front-end development, he thinks you will find these free tools super helpful.)
What screen size / device are you designing for?
It's nearly impossible to design a specific layout for each of the constantly changing devices and screen sizes out there today. That's why we use responsive design that automatically shifts content to make the best use of available space. But in planning out a responsive design, or when targeting a specific family of devices in particular, it's really helpful to have a range of popular screen sizes to consider, consolidated into one list like this.
material.io/devices
Size your browser perfectly
Now that you have a list of all the most popular screen sizes, you can use this gem to resize your browser to the exact same dimensions to help you preview your designs. This comes in handy when you are trying to determine your responsive breakpoints, or reporting to your friendly co-worker the exact pixel width at which his or her design went kablooey.
howbigismybrowser.com
Find the perfect color combination
Searching for that perfect color has never been easier. Use this HTML color picker to browse millions of colors and color harmonies. You can also learn which colors work well together and why.
htmlcolorcodes.com/color-picker/
Automatically create CSS Gradients
We used to have to create and repeat images to get a gradient effect background. This was a pretty rigid approach that was difficult to fine tune and often led to bloated page load times. Now CSS makes it easy to create complex, flexible gradients that load instantly. This powerful Photoshop-like CSS gradient editor makes it easy.
colorzilla.com/gradient-editor
A hassle-free way to self-host google fonts
Hosting google fonts yourself means less HTTP requests, which means your website should load a little faster. Faster website = good. This tool gives you what you need.
google-webfonts-helper.herokuapp.com/fonts
Better site typography in ten minutes
If you learn and follow these five typography rules, you will be a better typographer than 95% of professional writers and 70% of professional designers. Then check out the rest of this site for additional insights on why typography matters, type composition, text formatting and a whole lot more.
practicaltypography.com/typography-in-ten-minutes.html
Design great-looking apps for Apple iOS
Designing iOS apps can be difficult sometimes, but finding correct and up-to-date information about all of Apples’ devices shouldn’t be. These design guidelines will help any designer who’s building neat things for iOS get started within seconds.
ivomynttinen.com/blog/ios-design-guidelines
Get a free CSS makeover
Writing hundreds or thousands of lines of CSS, it can be really difficult to keep your formatting clean and consistent. Cleanly formatted CSS is particularly important when others have to work with your code. CSS is complicated enough without things also being messy. CSS Beautifier takes untidy code and automatically formats it into a thing of beauty.
cleancss.com/css-beautify/
Your CSS is full of mistakes. If I don't tell you, who will?
Writing a lot of CSS, you are going to make mistakes. Maybe a semi-colon out of place on line 323, or the omission of a closed bracket on line 457. CSS Lint analyzes your code and points out your mistakes so you can fix them. (Will finding these mistakes hurt your feelings? Opinions differ. But it'll definitely help you code better! :-) )
csslint.net/