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.



Development

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

The best way to debug JS is of course in the browser. Deb.js is a tiny script that, when included in a page, allows you to debug Javascript by showing you the exact parameters passed to a function and full stack trace. This allows you to perform a full step-by-step debug of what’s going on in your JS function.

Responsive Frameworks

Frameworks for fully responsive web design

3. Bootstrap  getbootstrap.com

Unless you’ve been living under a rock for the past few years, you’ve probably already come across Bootstrap. Bootstrap is the most popular HTML, CSS and Javascript framework, aimed at developing responsive sites. Originally developed at Twitter to encourage consistency across internal tools, it was eventually open-sourced to become one of the most popular projects on Github.

 

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

Yes, Google is helping out in multiple ways. Another awesome contribution by Google is AngularJS, which is essentially an MVC framework for client-side development. Essentially, it’s an MVC framework for Javascript, which thus makes it an improvement both for HTML and Javascript.

 

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

Tools for web development

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 

JsFiddle on the other hand, is a playground, or rather a sandbox where you can essentially fiddle and fluff about with Javascripts until you get that pesky little bug out, or until you get it all just right before you plug it into your project.

 



 

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

Modernizr is a small JavaScript library that detects the capabilities of the browser accessing a page. What Modernizr does is, very simply, tell you whether the current browser supports a specific HTML or CSS feature or not – and you can then decide what to do about it.

 

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

As developers, you’ll probably sometimes get inspired and wonder what a website is using as part of its technology stack. With all the tools that are available out there today, a simple view-source is typically no longer enough to understand what a website/web-application has been built with. Builtwith.com gives you all the answers you need. It analyzes the full technology stack and will tell you all of the components that a site is using, from the server, to the CMS, to the HTML, and the Javascript libraries and everything else can also be detected.

 

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.



Testing, Performance

Tools for website performance

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.

 

26. Javascript Compressor  jscompress.com 

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

Fonts, icons and images for web designers

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.

 

51. TIFF  tiff.com

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:

Tools for colors and CSS

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)

User eXperience tools for web designers and developers

 

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.



Management

Management tools for web design

BONUS! Web Design Quotation Tool webdesignquote.beewits.com

A screenshot of the web design quote generator

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.



Moods

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.


Designing

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? 


Exit mobile version