This article is based on a talk I’m giving at April’s Code Oregon Lab.
I’m happy to pay for great products that I use regularly. At the same time, if there’s a free tool that meets my standards, I won’t hesitate to use the shit out of it. I made an effort to limit this list to free resources that are either web-based or available for both Mac and Windows. These recommendations are for both the developer who wants help navigating the world of design and the designer who is always on the hunt for a new weapon to add to their arsenal. I’m also including a couple development tools that I believe promote experimentation and best practices and would benefit both designers and developers.
Build
For a developer or new designer looking to build their portfolio, a blank page is the enemy. Every incredible design starts with a blank page, but every incredibly awful design does, too.
1. Bootstrap
There’s a bit of a learning curve if you’ve never used a CSS framework before, but once you’ve familiarized yourself with the basic techniques and how to navigate the docs, your front-end development workflow will speed up significantly.
2. Bootstrap Templates
Although Bootstrap equips you with the paints and brushes, it still leaves you with a blank canvas. Bootstrap templates are like front-end dev paint-by-numbers.
3. Codepen
This web-based text editor allows users to practice their front-end skills without having to worry about file structure, external references, and tons of other nuisances. It’s a safe environment in which to experiment with HTML, CSS, and JavaScript preprocessors, as well as JS libraries. There’s also an element of inspiration and community because most “Pens” are public – feel free to study, fork, and alter the code of your favorite ones.
4. Google Fonts
Using system fonts can be quite limiting and using fancy subscription font services like Typekit can get expensive. Meet Google Fonts, a collection of over 700 typefaces that you can use for free in your web project.
5. Beautiful Web Type
A piece of advice: avoid most of those fonts like the plague. Among 700 of anything, there are probably only about 20 good options. Refer to this fantastic site for creative, bold, and elegant uses of a small selection of Google fonts.
6. Font Awesome
Now that you’ve customized your site with elegant typography, it might be time to add icons. There are plenty of advantages to using an icon font as opposed to images – the icons are vector, there’s a huge library of them, and you can manipulate their CSS properties just as you would any HTML text.
Modify
Bootstrap templates might be plenty for you; however, if you have an interest in refining your site further and would also like to sharpen your design skills, read on!
7. Dribbble, 8. The Best Designs, 9. Awwwards, 10. Site Inspire, 11. CSS Winner, 12. Muzli
I recommend these sites for all designers, regardless of expertise. Novices can refer to these galleries in order to help develop their aesthetic sensibilities, while seasoned web designers can use them to stay abreast of trends. Recently, our team has jumped on the Muzli bandwagon – I really enjoy the browser extension, which replaces your default tab with a collection of fascinating and inspiring links.
13. A List Apart
The New York Times of web design and development, this 20-year-old webzine focuses on publishing exceptional articles about web standards, best practices, and content creation.
14. Principles of Design
There is no definitive list of design principles, rules, or fundamentals, but these links are a great place to start. Once cannot become a great designer without giving attention to concepts like motion, balance, emphasis, and contrast.
15. Graphic Burger
You know all those portfolio sites in which the designer showcases their sleek app or website designs framed within iPhones or laptops? Well, they got those product “mock-ups” from Graphic Burger. It’s also the place to find UI kits, textured backgrounds, icons, and more.
16. The Noun Project
You linked your project to Font Awesome and used their social media icons, but now you need some bigger, fancier ones. The Noun Project has zillions of icons and they’re all available for free, as long as you appropriately credit the author. Alternatively, use icons with Public Domain licenses without having to give any credit.
17. Unsplash
Stock photos have an awful reputation, and for good reason. We’ve all seen the images of fake colleagues drawing fake charts on whiteboards and fake doctors giving fake patients great news. These are different. Admittedly, I very rarely need stock photography in my work, but when I do, I use Unsplash.
18. Gravit
This is the best free browser-based design tool I’ve ever used. It reminds me quite a bit of Sketch, which is the current favorite Photoshop competitor among UI designers. Although it’s quite a young piece of software, not to mention its inherent limitations as a web-based program, I highly recommend experimenting with Gravit.
Deploy
Perhaps not the sexiest part of the process, launching your site is, however, absolutely essential. And if you use one of these tools, you’ll also be versioning and managing your source code in a way that is aligned with current best practices. Believe me, you will not miss FTP.
19. GitHub Pages
Although GitHub Pages have been around for a few years, my sense is that they’re not particularly well-known and not used nearly enough. If you’re already using GitHub, choosing to publish a GitHub Pages site is a no-brainer. If you’re not, this is a fantastic opportunity to learn about GitHub, one of the most important pieces of web technology ever built. There is no limit to the amount of free GitHub Pages sites you can deploy. And, as a bonus, GitHub Pages run Jekyll, a popular static site generator. So even though you can’t use server-side scripting languages like PHP, you can still practice programmatic techniques and even create a blog using Jekyll.
20. FTPloy
If you’re already using GitHub or Bitbucket for version control and pushing your site with FTP, use FTPloy to advance your deployment process into the current century. FTPloy will watch a GitHub or Bitbucket repo and, when you make changes, the app will update your site. You only get one project for free and I’ve found the service to be buggy at times, but it’s an option worth exploring.
Please let me know if I’ve neglected to mention your favorite free tool, resource, or service.