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 issues so far. FireBug, originally developed for Firefox, allows you to debug and experiment with CSS in real-time to be able to fix those pesky CSS issues which often leave you scratching your head (or more likely, tearing at your hair)!
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 frameworks to make a developer’s life easier when designing responsive sites. Foundation is another framework built specifically for designing responsive websites. Similar to Bootstrap, it uses a grid concept and supports all modern browsers and devices. The choice of which framework to use is obviously a decision which you’ll have to make after trying each of them. All frameworks are going to have their strengths and their weaknesses.
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.
IDEs and Developer Playgrounds
8. Eclipse eclipse.org
Originally developed by IBM with a strong focus on Java, Eclipse is a free IDE that has grown to become a very strong development environment for a large number of languages. Chances are, there are plugins for your favourite language, your favourite source control, your favourite web server, and/or your favourite development everything.
9. Cloud9 IDE AWS Cloud 9
The cloud computing era has of course ushered in a cloud service for anything and everything, so if we’re discussing development environments, you’re sure to find a cloud-based IDE. Cloud9 is a fully blown development environment combined with a full Ubuntu workspace, including by default an Apache2 webserver to run your web apps. It comes complete with Preview and Run functionality, so you don’t have to worry about anything else for your web development environment. If you’re looking to go completely online with your IDE, your search can stop here.
10. Jsfiddle jsfiddle.net
11. Codepen codepen.io
Taglined as a Front End Designer playground, codepen can be used for two main reasons – the 1st is get inspiration or find awesome code to reuse within your website design. The 2nd is to test out and demo front end ideas and ideally get feedback from peers, whether it’s about the actual design or about fixing bugs.
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 any autocomplete bulls***, then NotePad++ is just that – NotePad on steroids. Without going overboard with functionality, it extends the text editing functionality to that minimal level which is necessary for power text editing.
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 new project. Yeoman helps to relieve that pain by helping you kickstart new projects through the use of generators. By integrating everything from the “scaffolds” of the new project, to the Build, to the package manager, Yeoman has a complete toolset for really cutting that “initiating a project” time to the minimum possible. There are many pre-built generators though it’s also easy to customize and create your own generator.
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 to your hosting server, what better way than the old but reliable FTP? FileZilla provides a complete, working, free FTP client. If you are self-hosting and need an FTP server, there’s also an FTP server that you can use.
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 thinking?! Version control of your projects should be a given. GitHub is essentially a cloud-based version control system. This is especially useful for syncing users who are across different locations and possibly geographies. Besides being a popular cloud-based version control repository, GitHub is also an essential source for finding source code that you might hack and reuse in your projects, collaborate on, or use as a host for providing your own plugins for other people to work with. It is the de-facto location to collaborate with all sorts of developers.
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 websites we develop are fast. Pingdom tools runs your website through a test that measures exactly how your website performs (from multiple regions) and then suggests ways and means to make your website load faster.
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 for both at once? GTMetrix generates a PageSpeed and YSlow score for any URL you give it, while also making recommendations on what you should do to make your website faster. Another nice touch of GTMetrix is that rather than just telling you which images have sizes which need to be reduced, it goes ahead and generates an optimized image for you. Your only task after that is to download the optimized versions and replace them on your site.
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 site, because the browser rendering or bot crawling your site does not stumble upon invalid markup and thus avoids having to figure out how to deal with that error. If you’d like to ensure you have correct and valid HTML, CSS and all-round good error-free HTML markup, the WWW consortium (W3C) have got a set of tools to verify correct markup including:
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, many times you’re going to have to fire off quick questions over chat about something you’re working on right there and then. And what better way than sending an annotated screeshot? ScreenSHU is a tiny download that saves your screenshot to the cloud and generates a URL for you to send to your collaborators in an instant.
40. Chrome Incognito, InPrivate Browser, Private Window aka Porn Mode for your favourite browser.
Although InPrivate browsing is colloquially known as Porn mode because it hides traces of your visits to naughty sites, it has a much more useful purpose for web designers and developers. Private browsing does not use ANY of the current browser caches, so if you’ve made some changes which are not being reflected on your normal browser, private browsing will wipe away all caches and show you how your site is really looking right now with a fully refreshed set of JS, CSS and other external files. Also, if you’re annoyed by aggressive retargeting ads from certain websites, private browsing makes sure those ads don’t follow you around!
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.
Fonts, Icons, Images
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 icons. One cool difference with Flaticon is a free Photoshop plugin which allows you to find the icons you need right from within your design environment.
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 probably need to figure out and mockup where the images will go and what size they’ll be. If you want to generate a placeholder so that you can better visualize the layout Fake Images Please? is the tool for you.
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 concept of giving out 7 images every 7 days, for free. If you signup for all the three services above, you’ll be getting quite a nice stack of great images every week, so do yourself a favour and go sign up 😉
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.
CSS and colors:
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 (definitely one of the best ones out there). Besides creating a palette based on whatever color you need, you can then combine this color using various combinations such as monotonic, complementary, triadic, tetrad and analogic – and there are many presets already available for those of us who are not entirely at ease with their own color mixing skills.
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
Awesome name, right? Pretty awesome tagline too: ‘CSS with superpowers!’ Essentially SASS extends on the power of CSS by allowing you to use variables, nested rules, mixins, inline imports and much more, but still resulting in CSS compatible syntax. This helps in keeping your CSS lean, organized and structured.
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.
User Experience (UX)
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 the way, and make them come alive for great demos, you need to use Napkee once you’re done with Balsamiq. What Napkee does is that it takes your Balsamiq mockups and exports them to Twitter bootstrap, breathing life into them and making sure your mockups are completely interactive. If you really want to make a great impression with your mockups, then it has to be Balsamiq + Napkee.
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 design and development, it’s easy to get lost in doing the work and forget to track time spent on projects – resulting in potential tragic consequences where income is concerned. One very nice touch of Paymo is a timer which ensures that you allocate time spent against a project.
92. Dropbox dropbox.com
Dropbox of course is cloud storage made easy. There is a multitude of ways you can use Dropbox for web design and development, storing/backing up your designs, sending files to and from clients or between colleagues, and syncing files between different geolocations. Honestly, even the free version of Dropbox could make your life a lot easier. If you’re not using it already, you’re missing out!
93. TimeDoctor timedoctor.com
Any freelancer or small team working on projects will need to monitor their time for billing reasons. Even if you don’t bill all of your time, you’ll want to know where you are spending it. Because you’ll have many of those days where you just wonder “Where the heck did my day go?” TimeDoctor helps you answer all of these questions by monitoring and timing the activities you’re doing such that you can boost your productivity
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?
Starting it from firebug is interesting , as if an end in the beginning ! Thank you , all the best .
What about simplySquares (http://simplysquares.com) – it’s also quite handful application for coding and webdesign
How about Brightpod (www.brightpod.com)? A clean project management software to help digital marketers.
Hey you missed proofhub, An awesome tool for managing development and designing of complex websites. Check it out!
Great list. Would like to add few more –
4. Color Safe
Thanks for sharing such a nice collection of web designing and development tools for designers n’ developers. I also would like to add one more of the web designing i.e. templatetoaster. Its a full features enrich software, its main features are bootstrap 3 support, ultra responsive, generates SEO n’ Mobile friendly themes, generates source code by itself, WYSIWYG editor, etc.,. All such features makes it worth to use.
honestly great list but, you should drop ‘development’ from the title. You covered one or two items on the development side that could include hundreds of tools. Most of these tools are design related which is cool, some of them were new to me, just don’t overreach
this is what this article wants to be -> http://enboard.co/
wow, what a comprehensive list, thanks for sharing! some other great tools: if you like hurl.it, you’ll love ghost inspector for web ui and browser testing, which has a free tier as well https://ghostinspector.com/
Thanks for a really huge list of tools! We use some of them.
Builtwith is not just a web technology information profiler tool, it also provides the lists of website of chosen technologies for your marketing needs. With this tool you can get the list of your competitor’s customers and try to steal some of them.
Or for example, if you build apps for Shopify, then you can get the list of all Shopify-based websites and promote your app to them.
We used it for a long time. Now we moved to Allora.io (we was also thinking about Datanize, but Allora is significally cheaper).
You made a great list I have personally used many of these tools you have mentioned and I can second you that these tools are just awesome for website designers and developers. As the competition is getting fierce in the market, web design tools are helpful.
Hey David, Awesome collections of tools. Love to read. As we are coffee roasters in Sunshine Coast, we are looking to establish our brand in online and currently working with a web design agency to design our brand new website. Here I got great tools to use and implement in our website design. Thanks for sharing.
Though I was looking for free one.
Still thanks for sharing
Hey, cool thanks for sharing this much tools. I never know that there are any such tools. It is a great help for a designer like me.
Nice Post. I have personally used many of these tools you have mentioned and I can second you that these tools are just awesome for website designers and developers. Thanks!!
Nowadays, web designing is in-demand. Anyone with knowledge of web designing can create a design for a website. But, having knowledge alone is not enough to create a good and responsive web design. It is important to know the basics of good web design. Thank you for sharing this information!
Amazingly thorough list, nice work David. I’ll definitely be using this as a reference.
Very handy list David bookmarking it now!
Great Blog Thank You
Thanks for sharing such a nice collection of web designing and development tools for designers n’ developers. It is a great help for a designer like me.
your post is really great thanks for sharing this
Thank You For Sharing such an important post, I really like the way you present the things.
Thanks for sharing such informative and helpful blog post and you are doing a good job so keep posting such amazing articles.
Wow, That’s a big list. Bookmarked it & shared with friends. Thanks.
Thank you for the information, it is really helpful!
As apart from the list above, I mostly like WordPress and Canva (sure, they have different purposes, but both are great). Figma is also necessary, especially to maintain communications with the client, but as for me it is a bit complicated.
wow, very details and informative article, I only use Gtmatrix for my development.
Great information, thanks for sharing with us.
It’s a very helpful tool for web design & developer to make things done & complete as per user-friendly guidelines.
Some tools like canva and dropbox overlap with the tools of marketers too. Thanks for writing down this awesome list and sharing it, David.
Thanks for sharing your awesome list of website design tools, really it helps me so much.