Here it is, our list of 101 awesome tools for web designers and developers! If you want to quickly access any one of the topics below, we’ve prepared a content index, just to make sure each topic is easily reachable.
Hey web designer! Do you create awesome websites? We’ve got a couple of great things for you. Our tool, BeeWits for helping you monitor your web design projects. We’ve also got this amazing website checklist of all the things you need to do when creating a website from scratch.
1. Firebug getfirebug.com
If you haven’t used FireBug, then you probably haven’t experienced any hardcore CSS
2. Deb.js github.com/krasimir/deb.js
3. Bootstrap getbootstrap.com
4. Google Web Starter Kit github.com/google/web-starter-kit
Google has often been a disruptor, and with the company giving such importance to mobile devices, it should, of course, be giving a helping hand in the whole reinvention of the web (now also for mobile!) The Google Web Starter Kit is a boilerplate (template) for those who are coding for multiple devices and who want to follow the Web Fundamentals – the best practices for developing for the modern web.
5. AngularJS angularjs.org
6. Foundation get.foundation
With the advent of responsive web design, there is no shortage of
7. HTML Entity Character Lookup entity-lookup.leftlogic.com
Ok, so you’re scripting an HTML page, and you forgot what the € sign is in HTML? Or the … ? HTML Entity Character allows you to type a character and get the HTML code for it.
8. Eclipse eclipse.org
9. Cloud9 IDE AWS Cloud 9
10. Jsfiddle jsfiddle.net
11. Codepen codepen.io
12. Sublime Text sublimetext.com
Sublime Text has risen in popularity lately. It is essentially a slick code editor, minimalistic but with functions very specific to developers. This is no-nonsense, pure code-editing.
13. NotePad++ notepad-plus-plus.org
If you like it raw, if you just want to code it all yourself without
14. Yeoman.io yeoman.io
On the other hand, there are those who appreciate a helping hand when starting code projects from scratch. If you’ve been developing code for a while, you know that there are a lot of repetitive (boring) tasks you need to do when starting a
15. DiffChecker diffchecker.com
If you are using a good source control service, you shouldn’t really need to diff any two files outside of source control. In real life however, there are some logistical code conflicts that might require you to do some kind of manual diff. Instead of looking for a piece of software/plugin or whatever to diff a couple of files once in a while, diffchecker will do the job for you.
16. Modernizr modernizr.com
17. Hurl hurl.it
When designing an API, or most probably whilst debugging some already launched API, you probably want to customize an HTTP request by customizing the headers, using specific authentication, posting specific parameters and then seeing what is actually returned from the endpoint. Hurl allows you to quickly create a custom HTTP request to send to a specific endpoint.
18. FileZilla – The free FTP project filezilla-project.org
Once you have coded your project and want to upload it
19. Built With builtwith.com
20. DUO helloduo.com
We’ve already shared quite a few tools and frameworks to develop for all devices from scratch. But what about testing for multiple devices on the fly? Enter DUO. This is a browser that simulates multiple devices within the same window,. This allows you to see whether the site you are developing will actually look good on your major device focus immediately without having to switch to different browsers, emulators or what have you. Nicely done DUO, nicely done.
21. Github github.com
If you’re not using source control then what the heck are you
22. BrowserShots browsershots.org
Browsers, different capabilities, different versions, end of lives, end of support, IE6 … it’s a mess out there. It’s a much bigger mess when you actually have to re-test all these browsers. Wouldn’t it be great if you could just test against all versions at once? Oh wait, you can 🙂 Browsershots takes a screenshot of your website as it appears on the most popular browsers and versions out there. You can then easily identify where you need to focus your effort.
23. Pingdom tools tools.pingdom.com
One of the things which we like to focus on is making sure the
24. GTMetrix gtmetrix.com
GTMetrix is another tool that we use when trying to make a website faster. Most people use Google’s PageSpeed or Yahoo!’s YSlow score – well, why not compare and optimize
25. What’s my DNS whatsmydns.net
When you’re switching ON your new domain, changing from one host to another, setting up a CDN, or otherwise fiddling around with your DNS settings, you’ll want to know whether the DNS has propagated or not. My DNS answers exactly that question by showing you the result of a DNS lookup at various DNS servers across the world.
When you’re optimizing your site for performance, one of the things you need to do is reduce the size of your code, including any JS files. A quick way to do this is to take your JS files (or specify a URL on JSCompress) and you’ll get a minified/reduced version of the JS files.
27. CSS Compressor csscompressor.com
Of course, besides your JS files, you’ll also need to minify and compress your CSS files. Again, this site does what it says on the tin, compress your CSS to reduce their size to the minimum possible.
28. CSS Tidy Online csstidyonline.com
Besides compressing your CSS to make sure it’s as small as possible, you need to make sure it is syntactically correct – this will ensure that browsers don’t “stumble” on your CSS and have to guess what you had in mind, making your pages render faster. CSS Tidy Online both compresses and fixes your CSS where necessary. You can either upload files, optimize inline CSS, or do it via the CSS URL, so whatever stage of development you’re in, you can use CSS Tidy Online.
29. Yahoo! Smush it smushit.com/ysmush.it
Another very important aspect of making a website fast is optimizing images for the web, essentially reducing their size as much as possible. Yahoo!’s Smush It tool, optimizes your images to their least possible size without losing any of the quality. With this being one of the most important aspects of making a site fast, Yahoo! Smush It should be your new best friend.
A little bit about W3C
As you probably know, correctly marked up HTML elements have hidden benefits for your
30. W3C Markup Validation Service validator.w3.org – an HTML validation service that ensures you are using correct HTML markup.
31. W3C CSS Validation Service jigsaw.w3.org/css-validator – CSS Validation service that ensures you are using correct CSS syntax.
32. W3C Mobile OK Test – No longer available – Mobile OK Checker that checks whether your site is mobile friendly.
33. W3C internationalization checker validator.w3.org/i18n-checker – Last but not least, check that your site is internationalization ready (for supporting various languages correctly).
34. Google Mobile-Friendly Test search.google.com/test/mobile-friendly
With Google actually tagging sites as mobile-friendly or not in search results via smartphones, you’ll need to make sure that Google actually sees your site as mobile-friendly. Submit your site here to see whether Google sees your site as mobile-friendly or not, because if you don’t you obviously need to fix it asap!
35. iPadPeek – no longer available
Want to know how your website looks on an iPad? Want to test vertical and horizontal orientation but don’t have the device at hand? Give it a run on iPadPeek.
36. iPhone Simulator iphone4simulator.com
Of course after testing your site on an iPad you’ll also want to make sure it looks good on an iPhone, in all likelihood the one single device which will have the largest % of views out of all devices.
37. Screenfly quirktools.com/screenfly
If you just want to run all your tests for various device types on a single screen, you can just hit up Screenfly and test. Whether you want to run the test on a phone, or a big-screen TV, a tablet, or a custom size you can run all your simulations on Screenfly.
38. TOR Browser torproject.org
The TOR Browser is a project coming out of the TOR project. TOR, better known as The Onion Router project, is usually used by individuals who want to protect their privacy / identity whilst browsing online. Although it can be used for nefarious purposes, our recommendation of its usage is for something very simple, simulating access to a website from various parts of the world.
39. Screenshu screenshu.com
Whilst developing or collaborating with remote teams,
40. Chrome Incognito, InPrivate Browser, Private Window aka Porn Mode for your favourite browser.
41. Viewport resizer lab.maltewassermann.com/viewport-resizer
If you are absolutely attached to your browser and don’t want to switch your browser during development, there are other easy ways to test responsive designs. Viewport resizer is a bookmarklet that allows you to switch to various views and simulate what the site you’re developing looks like. The great thing about this is there are no installs, no URLs to visit, no nothings – just click on the bookmarklet and you’re good to start testing.
42. FontSquirrel fontsquirrel.com
If you’re looking for a free font that is licensed for commercial use, FontSquirrel is the site for you.
43. Fontshop fontfont.com
On the other hand, if you are looking to find a great library of original fonts (which are sold at commercial rates), FontFont is a very good place to start (you probably won’t have to look anywhere else).
44. Fontello fontello.com
Fontello is a tool to build custom fonts with icons. Besides having a large collection of open-source artworks, Fontello allows you to quickly pack vector images into webfonts. Once you have uploaded the images or chosen the fonts you want to use, they are packed conveniently for use in your web design project.
45. IconFinder iconfinder.com
Of course there are many places to find icons, IconFinder has a good collection of free icons, besides icons sold at a flat rate.
46. FindIcons findicons.com
With icons being such a crucial part of web design, there is literally no shortage of web pages dedicated to finding icons. Findicons is another such site.
47. Iconizer iconizer.net
The great thing about Iconizer is that, not only is it an icon search, but once you have found the icon you want, you can tweak it so that it suits your needs BEFORE you download it. You can choose the background against which the icon will be displayed, give the icon a size, choose transparency and colors, hue saturation and lightness, flip or rotate the icon as necessary – make it just right for you. Nothing you can’t do with Photoshop of course, but why not do it on the fly?
48. Google Fonts fonts.google.com
Of course we can’t have a discussion about fonts without referencing Google Fonts. The great thing with Google Fonts is that when you find the font you’d like to use, you just need to include a line of code into your site and just start using the fonts in your CSS. If you’re concerned about page loading time, you’ll also get an indication of the heaviness of the font on page load lime.
49. FavIcon Generator tools.dynamicdrive.com/favicon
If you want a simple Favicon, this site generates a 16 x 16 image as an .ico file which you can then place in the root folder of your site to get the icon displayed by the browser.
50. RealFaviconGenerator realfavicongenerator.net
Of course nowadays it’s not as simple as a single Favicon to rule ’em all. What with iPhones, Androids, tablets and Windows phones, all types of apps, you’ll need more than one simple 16 x 16 icon. RealFavIcon Generator helps out by generating an icon to be able to cover ALL scenarios.
We already spoke about a diff checker to check the differences between two files in a few tools. But what if you have a couple of fonts that you want to compare? Tiff is here to save the day. It is a diff tool that contrasts the differences between two fonts.
52. FreePik freepik.com
Here’s another site that is focused on providing thousands of free graphic resources. How do they provide quality graphics for free? Essentially they’ve partnered with great designers to use the site as a showcase of their works in return for great exposure.
53. Flaticon flaticon.com
Flaticon is a repository for more than 16,000 glyph
54. Awesome Images github.com/heyalexej/awesome-images
We’ve always believed in the reality of “you get what you pay for”, so if you want great stock photography, then you should be using your sources to procure good stock images. Then again, the beauty of the internet is the sheer size and diversity of it – and that means you’ll surely find people who are willing to give their stuff out for free. This is a curated list of free awesome imagery that you can use if you can spare the time to browse through them and find what you need.
55. ByPeople bypeople.com
Whilst we’re on the subject of freebies and curated lists, ByPeople is a list of thousands of great resources for web ninjas. You’ll definitely want to keep abreast of this site as you’re sure to find something useful for your project.
56. Fake Images Please? fakeimg.pl
Of course whilst you’re in the first phases of designing and developing your site, you’ll
57. Placehold.it placeholder.com
And just in case you’re not happy with one image placeholder renderer, here’s another one! It’s not very different from Fake Images, but whatever, you now have two to choose from 😉
58. FreeImages (formerly known as Stock.xchng) freeimages.com
This is one of the oldest free image sites which has been around since forever. It’s a place where budding artists / photographers post their images for other people to use in their own designs, publications, websites and whatever. If you want to check whether you’d be able to sell great photos or artwork, or if you’re looking for free stock images to use in your site – this site is a hallmark.
59. Wikimedia Commons commons.wikimedia.org
At the time of writing, there are nearly 24 MILLION freely usable media files. Although the quality varies, the size and diversity of this repository make it useful in many circumstances.
60. Unsplash unsplash.com
10 new (high-resolution) photos every 10 days. Do whatever you want with them since they are released under a Creative Commons Zero license which means they can be used even in a commercial setting with attribution. Of course they are limited in quantity, but the quality is excellent.
61. Jaymantri jaymantri.com
Very similar to Unsplash, Jaymantri releases 7 new photos every Thursday under the CC0 license. Awesome imagery, if you can find a use for them.
62. LittleVisuals littlevisuals.co
LittleVisuals is another site which follows on the
63. Albumarium albumarium.com
Albumarium is another excellent source for absolutely beautiful imagery. Although the licenses of the images vary, you’ll find a much broader selection than just waiting for 7 new images every 7 days (and hoping that one of them hits your specific need 😉
64. Paint.NET getpaint.net/download.html
If you’re just starting out and can’t afford a Photoshop license, you’d probably still want a basic image editor. Paint.NET is the tool for you. Of course it’s not as powerful as Photoshop, but you’ll find that it is quite powerful for something which is completely gratis!
65. GIMP gimp.org
If you’ve fallen out of love with Paint.NET or if you’re on a Mac OS, you can go for the Paint.NET alternative: GIMP. Again, for a free tool, it features quite an impressive toolset.
66. Pixlr pixlr.com
If you’re out and about and don’t have an image editor at hand, what do you do? Do you panic and download GIMP, or Paint.NET? No! You turn to the cloud of course. Pixlr allows you to edit images either from your device, or from a URL, from your mobile device or wherever.
67. 0to255 0to255.com
Finding a color scheme for those developers who aren’t very attuned to the artistry of color combination can be hard. 0to255 allows you to select a base color, and then creates a whole palette of variations of that color. Perfect!
68. HailPixel color.hailpixel.com
This is a fun one! With Color by HailPixel, you can come up with your own palette. Drag your cursor around to find a color you want and click to save it to the palette. Repeat. Each color you select stacks itself next to the other ones you’ve selected until you’ve created the whole palette! You can then tweak the RGB values as necessary, creating a whole rainbow of colours.
69. Patternizer patternizer.com
Just like you need a color scheme, you might also need to create a pattern. If you want to create a CSS pattern with your specifications, Patternizer allows you to tweak and change a number of values to create the pattern you need in seconds. The great thing is as soon as you’re happy, you’ll only need to switch to the code tab, which will show you the CSS you’ll need to render this pattern in CSS.
70. ColorZilla colorzilla.com
Colorzilla is simply a colorpicker, and what designer/developer doesn’t need a colorpicker? Activate this Chrome plugin and just pick up the color from any part of the page you are viewing – you’ll get the color both in RGB and HTML value.
71. Color thief lokeshdhakar.com/projects/color-thief
Whilst we’re on the subject of picking out color from websites, you might also want to pick up some color (or the whole palette) from any image. This tool allows you to sneakily fetch the colors used in an image. Perfect if you’re feeling inspired!
72. Paletton Color Scheme Designer paletton.com
Just what it says on the tin – a colour scheme designer
73. SpriteMe – no longer available
If you want to make your page load quickly, you know you should be using sprites to reduce the number of HTTP requests required to download your page. Generating sprites is not exactly very straightforward though, especially if you haven’t thought about it beforehand. Spriteme to the rescue! Spriteme allows you to create a sprite from any page which is currently loaded in your browser. It generates both the full image sprite and gives you the CSS code you’ll need to reference each part of your sprite.
74. SpritePad wearekiss.com/spritepad
If your website hasn’t been created yet and you want a tool to create sprites from your raw images, there is of course another tool you could use. SpritePad allows you to simply drag your images into a pad and organize them in any way you want to until you’re happy with your sprite. Whilst you are creating the sprite, you can see the CSS being generated on the fly. Once you’re happy with your sprite you can download it and copy the CSS for use with the sprite.
75. SASS Syntactically Awesome StyleSheets sass-lang.com
76. LESS lesscss.org
This is another framework, or rather language, to supercharge your CSS. Essentially, LESS is a dynamic stylesheet language that allows the use of what you would expect from a programming language, such as variables, mixins, nested rules, operations and functions and so much more. LESS can be used either on the client-side by including less.js file or else the CSS can be rendered from the LESS files.
77. Koala App koala-app.com
Whilst we’re on the subject of using CSS frameworks, chances are that you’ll eventually want to compile your creations. Koala is a small application for compiling Less, Sass, Compass and CoffeeScript compilation. Of course pre-compiling saves the on access render of your stylesheets, so you might want to take a look at making use of this app.
78. Userium userium.com
If you want to make sure you have covered most UX bases, Userium provides a nice Usability checklist, so that you can make sure you catch common usability problems before even going for your first round of actual user testing. Whether it’s about the navigation, the home page, the layout or wherever, if you’ve ironed out the issues highlighted here – you’re probably very much on the right track.
79. Balsamiq balsamiq.com
When it comes to mocking up complex websites and web applications quickly, there’s absolutely nothing that comes close to Balsamiq. It’s not for Pixel Perfect designs, it’s for getting across quickly what you want each part of your site / application to do, without a lot of fancy schmancy. Besides the fact that you can drag and drop most common web components, the fact that it looks like it’s hand-drawn gives it that nice personal touch.
80. Napkee napkee.com
Of course if you really want to take your mockups all
81. Cacoo cacoo.com
Another diagramming tool. Although Cacoo can be used for mockups, it can also be used for a wide range of other types of diagrams such as flowcharts, sitemaps, mindmaps, database diagrams and more.
82. RedPen redpen.io
If you want (another) really fast and simple way to get feedback about your designs, it can’t get any simpler than Red Pen. Just drag an image and start commenting on the image. Even if you don’t use it – visit the site and have a bit of a chat with Clive – the commenting (ro)bot.
83. Cage Cageapp.com
Getting approvals for designs is somewhat of a tedious process of to-ing and fro-ing by emails. Revisions might get lost, feedback is unclear… in short, it’s a headache! Cage resolves all of that by allowing you to upload your designs to Cage and put notes and comments directly on the designs themselves. Clients or teammates can mark designs as approved, making the process so much easier.
84. Five Second Test fivesecondtest.com
When you’re working on your landing pages, you need to make sure your site passes the “5 second test”. What is the impression that your customer gets in the first 5 seconds of viewing your site? Are they impressed, excited, intrigued? Are they repelled? Five Second Test allows you to optimize your landing pages by crowdsourcing the testing of these pages. You can do both here, you can take a test to score points, which you can then redeem on tests against your own landing pages.
85. Hotjar hotjar.com
Of course, if you really want to know what your users are doing, where they are clicking, scrolling, or how users are really using your website, you need a tool like Hotjar. By embedding a very tiny script in your site, you can actually record what users are doing on your site, giving you an idea of how people interact with it. If you want to find any usability issues in your site, HotJar is the way to do it.
86. DrLink Check drlinkcheck.com
Have you ever experienced that most frustrating of moments when you click a link that intrigues you, only to be led to a 404 error? Do you want users of your website to NEVER experience that moment? Then you’ll need to run your site through DrLinkCheck. DrLinkCheck also lets you know if you’re being linked into by blacklisted sites (to make sure you don’t get any negative SEO).
87. Wufoo wufoo.com
Although strictly speaking not really a tool for web design or development, there are many ways in which you could embed Wufoo in your site. Wufoo allows you to create awesome forms and store the results of those forms to a cloud storage database. For example, you can use Wufoo to create a contact form, a customer satisfaction form, or other complete forms such as employment forms, online ordering forms, or whatever other forms you may think of.
BONUS! Web Design Quotation Tool webdesignquote.beewits.com
If you’re like us, creating quotations for web design is something which you do often, and is not exactly a pleasant process. Because we’re nice people and because we like making peoples lives easier, we’ve designed the Web Design Quotation Generator. It’s a simple tool that will replace your need for calculators, excel sheets and photoshop with 2 simple steps:
Step 1: You fill out whatever details you need included in the web design quote below.
Step 2: You hit the “Generate My Quote” button!
You’ll then receive your detailed, personalised and professional-looking quote via email within just a few minutes. Easy as pie.
88. Basecamp Basecamp.com
If you’re looking for a no-nonsense generic project management tool, try Basecamp. It’s been around for a while and its latest redesign focused very much on excellent UX, making this tool one which you definitely want to investigate.
89. Asana Asana.com
Of course there is no shortage of generic project management tools, with a variety of interfaces (usually their differentiator is their UI). Asana is another good one. The brainchild of the co-founder and ex-engineer of Facebook – both of whom used to work on improving the productivity at Facebook -Asana boasts about creating its own programming language just to focus on its UI and UX.
90. Trello trello.com
Another organizing tool with quite a different concept in terms of the way it handles the UX. Using boards, with cards pinned to the boards, Trello prides itself in being able to visualize everything you need to organize and manage your work at a glance.
91. Paymo paymoapp.com
If you’re a freelancer, or just starting out with web
92. Dropbox dropbox.com
Dropbox of course is cloud storage made easy.
93. TimeDoctor timedoctor.com
94. TeamViewer teamviewer.com
When you’re having a video call about a website’s design, you’ve usually got your laptop in front of you and you’re madly gesticulating at the screen, pointing things out, only to realise that the other person can’t see what you’re pointing at. Right? You can’t quite point your camera at the screen, so what can you do? Enter TeamViewer – a simple small install which allows you to create and join meetings through an easy to use code, allowing all attendees to view the screen of the presenter. So now you can clearly guide them and show them exactly what it is you’re pointing at.
95. Prezi prezi.com
If you are making a slideshow or a presentation, Powerpoint is a little bit passé. Thankfully, Prezi is all you can ask for from a presentation tool, with the benefits of online collaboration and online storage.
96. Evernote evernote.com
If you’re like us and can’t always keep up with everything, taking small notes about things is the only means of survival (Have you seen Memento?) Evernote allows you to take notes and organize your life. You can attach files (such as photos) or whatever else you need to link to the notes. And of course, you can sync everything to or from your phone so that you are always ready to take note of that “Eureka” moment when you’re walking to the office.
Some can’t work without their favourite band playing on their headphones. Others get distracted because they get drawn into the music and end up singing along instead of working. So what do you do when you can’t work without background noise but can’t work with music playing? The beauty of life is the diversity in all of us. Now, you can find the perfect background sounds to suit your work habit, helping you code harder and faster!
97. Rainymood rainymood.com
If you love the sound of a rainy stormy day, you can immerse yourself in a thundery soundtrack on Rainymood. Perfect during the hot summer months where all you want to do is laze in the sun!
98. Coffitivity coffitivity.com
On the other hand, if the hustle and bustle of a cafe are what inspires you, Coffitivity can replicate the sounds of a café wherever you are, be it at home or on the train.
99. Slicy macrabbit.com/slicy
To export PSD elements as assets for your website or app, rename your layer groups once and Slicy will do the rest! Slicy allows you to export layer groups independently, giving you total freedom to move, overlap or even hide design elements.
100. Behance behance.net
If you’re looking to get inspired, you can’t get any better than Behance, where designers showcase their best work. Whether it’s for your inspiration, or to find awesome designers to hire for your own work, make Behance your daily visit.
101. Canva canva.com
Then again, if you’re not such an awesome Photoshop designer and you just want to do some basic editing, you’d be better off mucking about with Canva. It’s really simple to use and create good looking graphics designs for your small business or blog when you are still starting out and can’t hire a professional designer yet.
Tag, you’re it!
What awesome tools do you use when developing and designing a website? We’d love to hear from you!
We’re working on a ton of stuff like this. If you’d like to be the first to know what we’re up to next, why not join our mailing list, Like us on Facebook, or Follow Us on Twitter?