Best Web Designer Tools 2015
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. Firebuggetfirebug.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.jsgithub.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. Bootstrapgetbootstrap.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 Kitgithub.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. AngularJSangularjs.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 Lookupentity-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. Eclipseeclipse.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 IDEAWS 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. Jsfiddlejsfiddle.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. Codepencodepen.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.ioyeoman.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. DiffCheckerdiffchecker.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. Modernizrmodernizr.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. Hurlhurl.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 Withbuiltwith.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. DUOhelloduo.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. Githubgithub.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. BrowserShotsbrowsershots.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 toolstools.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. GTMetrixgtmetrix.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 DNSwhatsmydns.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 Compressorjscompress.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 Compressorcsscompressor.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 Onlinecsstidyonline.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 Servicevalidator.w3.org – an HTML validation service that ensures you are using correct HTML markup.
31. W3C CSS Validation Servicejigsaw.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 checkervalidator.w3.org/i18n-checker –Last but not least, check that your site is internationalization ready (for supporting various languages correctly).
34. Google Mobile-Friendly Testsearch.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 Simulatoriphone4simulator.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. Screenflyquirktools.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 Browsertorproject.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. Screenshuscreenshu.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 resizerlab.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. FontSquirrelfontsquirrel.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. Fontellofontello.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. IconFindericonfinder.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. FindIconsfindicons.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. Iconizericonizer.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 Fontsfonts.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 Generatortools.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. RealFaviconGeneratorrealfavicongenerator.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. TIFFtiff.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. FreePikfreepik.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. Flaticonflaticon.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 Imagesgithub.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. ByPeoplebypeople.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.itplaceholder.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 Commonscommons.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. Unsplashunsplash.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. Jaymantrijaymantri.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.NETgetpaint.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. GIMPgimp.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. Pixlrpixlr.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. 0to2550to255.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. HailPixelcolor.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. Patternizerpatternizer.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. ColorZillacolorzilla.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 thieflokeshdhakar.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 Designerpaletton.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. SpritePadwearekiss.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. LESSlesscss.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 Appkoala-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. Useriumuserium.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. Balsamiqbalsamiq.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. Napkeenapkee.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. Cacoocacoo.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. RedPenredpen.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. CageCageapp.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 Testfivesecondtest.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 Checkdrlinkcheck.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. Wufoowufoo.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. BasecampBasecamp.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. AsanaAsana.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. Trellotrello.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. Paymopaymoapp.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. Dropboxdropbox.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. TeamViewerteamviewer.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. Preziprezi.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. Evernoteevernote.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. Coffitivitycoffitivity.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. Slicymacrabbit.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. Behancebehance.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. Canvacanva.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?
Follow @beewitsapp
Best Web Designer Tools 2015
Source: https://www.beewits.com/101-awesome-tools-for-web-designers-and-developers/
Posted by: terrytherend.blogspot.com
0 Response to "Best Web Designer Tools 2015"
Post a Comment