If you are a web designer, you know that some of the work we do starts to get tedious and repetitive. However a lot of tools are available to make our life easier. If you are not using these tools, then you probably should. They're all fantastically useful for anybody working in the web design sphere.
Let's start with the FREEBIES! (Free web design tools)This tool is going to become an essential part of your design toolkit. In AdobeColor CC you can create color schemes, save or import them across all Adobe Products. There's also a feature, which allows users to upload an image and extract schemes directly. Your brand colors will never be out of sync again!
2. WhatTheFont — find what font is being used
Log on to WhatTheFont, upload a picture of the font, and find out exactly what font is used.
3. Am I Responsive Design — what does a website look like in various sites
Definitely a must-have for client meetings. This visual design tool enables you to see what a website will look like across a wide range of viewports. A great way to show clients the end product before you have it.
4. Wirefy — wireframe a website
With Wirefy you can turn any web page into a wireframe just in one click!
5. Web Flow — design a website without coding
With Web Flow you don't have to build the code yourself — it 'codes' for you as you go.
6. Awesome Screenshot — share screenshots through a URL
Have you ever tried taking a screenshot and scrolling down the page at the same time? Oh and wait, you want to crop and edit the screenshot? With Awesome Screenshot you will handle it in a blink of an eye.
7. Unsplash — amazing and free stock photos
Looking for high-resolution photos? Unsplash is going to be your best friend forever more.
8. Typegenius — find perfect font combinations
Having trouble with looking font combo? Typegenius is the place to go. Just select a font from the dropdown menu on the site and you will be offered a range of fonts that work well with your selection.
9. TheDesignInspiration - get inspired for great designs
Welcome to your online muse. Created by an innovative group of designers, The Design Inspiration features thousands of logos, illustrations, websites and photos.
10. ColorZilla — identify the exact color being used on a webpage
With almost 300,000 icons and 1300 icon sets available, this icon search engine makes life easier for both designers and developers.
11. Firebug — debug your HTML, CSS and Javscript in real-time
Firebug allows users to debug and make changes to CSS, HTML and JavaScript in real time.
12. Bootstrap — The framework for developing responsive websites
Originally the brainchild of Twitter, this HTML, CSS and Javascript framework is a one of the most popular web tools for developing responsive sites.
13. Pingdom — get your website running fast
Website running a bit slow? Just log on to Pingdom to run a speed performance test! This handy tool also offers suggestions to improve your loading times.
14. Smushit — optimize your images for faster website loading
This plugin will scan your site to reduce the size of your images without losing quality.
15. Google Mobile-Friendly Test — is your website mobile-friendly?
Unless you've been living under a rock, you know how important mobile responsiveness is for your website. It's a good idea to submit your site here to see whether Google thinks its mobile friendly or not, because if it doesn't — you'd better fix it fast!
16. Freepik — find quality graphics
In search of a quality graphic? Freepik partners with designers across the world to provide great exposure in return for free high quality works. It's a win-win.
17. Five Second Test — run quick usability tests with real users
We all know that first impressions count and you can test-drive yours right here. Five Second Test, part of a bigger suite of UX focused products from UsabilityHub gives you the opportunity to pimp up your landing pages by crowd sourcing the testing of each page. You can also score points by switching sides and taking part in other tests.
18. Rinse — hosting your portfolio here
Whether it's for storytelling or hosting portfolios, Rinse is a superb tool. It's an inspiration style site where designers can show how images can be used to tell compelling and powerful stories online.
19. Lining.js — down-to-the-line CSS control
This one is a fresh tool for web designers that helps to make websites more attractive and beautiful with the minimum amount of coding and HTML clutter. Essentially it gives you total control on the text you are using. If you are familiar with CSS tricks, you'll love this library.
20. Surge — a free CDN for developers
Surge is a free content delivery network aimed at web designers and developers. It's designed to work with tools like Grunt, Gulp, Browserify and NPN.
21. ai2html — convert AI files into HTML and CSS
As the name suggests, this site turns your AI Illustrator files into HTML and CSS. It's super handy for turning detailed mockups into workable webpages with minimum fuss.
22. MarvelApp — convert images and mockups into prototypes
Marvel is the perfect site for turning design files into code. Marvel is one of the easiest ways there is to turn your sketches, images and mockups into realistic mobile and web prototypes.
23. What does my site cost? — what is your site's cost on mobile data?
Ever wanted to know how much it costs people to view your site on their data plans? Here's the site for you. Enter any URL here to find out how much it would cost a person on one of the cheaper mobile data plans to download your site on their device.
24. Amazium — another responsive framework
Amazium is a really intuitive responsive framework that helps to build basic but colorful websites. Really useful for putting together samples and basic responsive sites.
25. Behave.js — add IDE style behaviours to text areas
Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to interact with text areas.
26. UILANG — a programming UI focused language for web designers
Creating custom user interface components, adding some interactivity to your site, building prototypes — the possibilities are endless. It's perfect for developers of any level.
27. HAML — making HTML look pretty
Haml (HTML abstraction markup language) is based on one primary principle: markup should be beautiful. It's not just beauty for beauty's sake either; Haml accelerates and simplifies template creation down to veritable haiku.
28. PicMarkr — watermark any image
PicMarkr allows you to easily add watermarks to any image. For people without Photoshop, this is invaluable to ensure that your design ideas don't end up anywhere without your permission.
29. Texturemate — find the perfect texture free
Texturemate is a great resource for students, graphic design artists, and photographers who need textures but don't want to shell out too much, or anything at all, for the privilege!
30. Seamless Textures — more free textures
Seamless Textures is a site with tons of free textures and the only charge for full access is a "like" on Facebook.
31. Inkscape — powerful and free vector program
Want to make vectors but don't want to spend a fortune on Adobe Illustrator? Inkscape is your best buddy by being both a powerful vector program and free as a bird.
32. Patternizer — create your own CSS patterns and textures
Need CSS patterned backgrounds but find you're a bit short on cash? Patternizer lets you create fully custom patterns free of charge.
33. Dribble — a portfolio site for designers and creatives
Dribble offers a platform for designers to share their work, discuss their projects and get feedback from each other.
34. HTML5 Boilerplate — start your HTML projects from here
HTML5 Boilerplate is just what it says on the tin: a boilerplate template for HTML5 projects. You'll get everything you need for a front-end development project in one completely free download.
35. FitText — make text responsive
FitText is a cool little Javascript app that lets you make your text responsive on your website. Invaluable, and free too!
36. Scribus — open sourcesource and Free desktop publishing software
Do you need to make that company newsletter, create an eye-catching brochure or flyer, but don't have a spare $1000+ to spend on InDesign? Then check out Scribus. It's open-source and will work on OSX, PC and Linux.
37. PSDtoWeb — convert PSDs to HTML and CSS
Another tool that does what it says on the tin. Upload your PSD to this site and watch it get chopped into HTML/CSS images before your eyes. It doesn't handle text well, so it's not ideal for making full sites, but as a mock-up tool — you can't go wrong.
38. Invision — the world's leading prototyping, collaboration and workflow platform
If you need a better way to present your ideas and design work to clients than Powerpoint, then Invision might be right up your street. This tool allows you to turn your design into interactive displays. Great for collaborating on ideas, presentations and prototypes. All in real-time!
39. iDisplay — extend your displays to smartphones and other devices
iDisplay allows you to use your smartphone, tablet or both as additional displays for your desktop or laptop, complete with support for touch as an input device. This allows you to use your tablet as a display screen for presentations or as a backup screen for detailed work in your design software of choice.
40. SkyFonts — install webfonts to your desktop
SkyFonts is a cool app that lets you to install web fonts directly onto your computer, just like the new Adobe Cloud feature but with the added bonus of being free. SkyFonts has the entire collection of Google Webfonts available, making it much easier to produce realistic webpage mockups that use webfonts.
41. Fount — discover what webfont is being used
Ever visit a site and wonder "what the heck is that webfont?". Fount is a free browser add on that will tell you which web font you're actually seeing — not just what is supposed to be seen. It'll also tell you the font size, weight, and style.
42. Designers Toolbox — nifty set of tools for designers
Designers Toolbox offers a range of handy reference guides to let you quickly establish print and internet pixel sizes, compare binding options, interpret proof-reading marks and preview fold cut offs. It's also got a nifty Lorem Ipsum generator built in.
43. TinEye — reverse image searching and so much more
It's not just for reverse image searching anymore — TinEye uses a database of 10 million Creative Commons images harvested from Flickr to let you explore infinite color combinations. It's probably the fastest way to get free images in the perfect color combination, and it's also just a fascinating and intuitively designed tool that's a pleasure to use.
44. ColorExplorer — free tools for working with digital colors
CE has tools that can help you determine the WCAG validity of your color choices, conversion tools to help you move between different systems, as well as a whole suite of picker and palette generation tools. For a free program, you won't get much better.
45. MyPaint — open source and free graphic desing application
This open-source graphic design application is aimed towards digital painting, rather than straight up graphic design, but it's incredibly powerful for a free program. For those who want to digitally illustrate but don't want to fork out for Photoshop, this is the perfect solution.
46. GIMP — free image editing software
It might sound a bit odd, but GIMP is as good as it gets when it comes to Photoshop quality at zero cost. It also opens and saves files as TIFFs and PSDs, so it can be used professionally.
47. Quanta Plus — free web developrment tool for KDE
Quanta is a free Linux based program that closely resembles Dreamweaver's interface while being completely free. One drawback is that it has no direct HTML5 support, but for basic syntax editing you won't go far wrong at a $0 price point.
Got a Little More Spend in Your Pocket?If you've got some cash to spare on great tools, you might want to check out these awesome tools! They're all worth the money you'd be spending!
48. Infogram — create charts and infographics online
Got a presentation coming up? This data visualization product basically pimps out your data and turns it into charts, infographics and interactive visuals to keep your audience engaged. The free product offers a wide range of options and the paid upgrade is ever better!
49. Webydo — create web designs without coding
Webydo is a great tool for creating web designs without having to go through the hassle of coding it yourself. You can create "pixel-perfect responsive web designs" that work great on a variety of devices.
50. Pixlr — online photo editing software
While Adobe Photoshop is an industry standard tool that many designers swear by, some of those very same designers may not want to pay the monthly fee to license that software, or the $1000+ fee to buy older versions. Pixlr opens .PSD files and retains all the original layers, making it a great alternative to Photoshop.
51. WeTransfer Plus — send large files
WeTransfer enables you to send up to 10GB of files and, with files, video and media getting bigger every day this quick and easy web transfer client makes life much easier!
52. Squarespace — website builder without coding
Squarespace is a popular web-based HTML5 website builder that will help you create beautiful sites in a matter of minutes. Sure, it's theme based and works within preset parameters — but it works and guarantees responsiveness across all devices.
53. Wix — another no coding website builder
Wix has moved from Flash to (thankfully) become an HTML5-based website builder. Wix is primarily a paid service but does offer a limited number of features in its free version as well.
54. UXpin — a UX Design Platform
UXPin's a cool tool made with UX Designers and developers in mind. It lets you manage version control, your team and your clients in one place — to make sure you get a top class design product at the end.
55. Macaw — draw HTML rather than code it
Macaw gives you the same flexibility as your favorite image editor but also lets you craft semantic HTML and remarkably tailored CSS.
56. Homestead — another online website builder
If you're willing to get web hosting with Homestead, this software is an excellent choice for designing your website. It offers more templates and graphics than nearly any website development software out there, with the added bonus of excellent customer support.
57. Adobe Edge Inspect — check how designs look on various devices
Edge Inspect will sync all your devices to view the same page at once. Refresh the page on one device, and you refresh them all.
58. FontForge — online font editor
Fontforge is an outline font editor that helps you make or edit any kind of font package you have. It has a free download and a paid option that offers more features.
59. FontCreator — create your own custom fonts
FontCreator works with OpenType, TrueType and Web fonts, and lets you create any font you want. Your handwriting, old typesets, and more, can be turned into web ready fonts for less than $60.
60. Sketch — professional vector application
Sketch is a professional vector app with an intuitive interface and powerful tools. It's not Adobe Illustrator, but its as good as there is out there as a paid alternative.
61. VectorFinder — search multiple stock sites from one location
This great site lets you search the most popular stock sites from one central location meaning you aren't surfing from Shutterstock to Deposit Photos on your quest for that perfect vector.
62. Parse — focus on the UX, Parse handles do the backend
This tool lets you add a powerful and scalable backend in minutes to any site you own. Perfect for developers of all skills.
63. Proto — fast prototyping tool
This site lets you create fully-interactive mobile apps that are great for showing to clients at the build stage. No coding required.
64. Framerjs — build interactive, animated prototypes
Framer is a new tool to build interaction and animation prototypes for apps and sites.
65. PSDtoHTML — convert PSD files to responsive HTML
Starting at $99 for PSD to responsive HTML conversion, you won't get much more bang for your buck than you will at PSDtoHTML. Excellent customer service and easy layout means you're always in control of your conversion.
66. AI to Canvas Plugin — create HTML5 canvas directly from AI files
The AI to Canvas plug-in enables Adobe Illustrator to export vector and bitmap artwork directly to an HTML5 canvas element that can be rendered in a canvas-enabled browser.
67. Cloud 9 IDE — your cloud-based Development Environment
When it comes to development, most of us are still used to a desktop application. Cloud 9 can change that — with a fully fledged IDE in the cloud combined with an Ubunto workspace — all in the cloud, you no longer need to have a desktop IDE.
68. Corel Draw
Priced around $600, Corel Draw is a great mid-priced alternative to Illustrator, with all the benefits. If the Illustrator layout isn't for you, this might be an option.
Have a nice day!
Source: 68 Tools to Make a Web Designer's Life Complete
No comments:
Post a Comment