Complete web development toolkit
A list of handpicked intuitive web design and development tools that will in most obvious ways enhance your workflow. From inspiration, color, font, CSS, test platform, place holder, to presentation based toolkit. It’s simply a complete web development toolkit
Getting the work at hand done quickly creates more time for the next one in the queue, and that’s where Emmet comes in. Emmet is a plugin that adds some time saving magic to most popular text editors , significantly improving HTML & CSS workflow. It make it possible for developers to code HTML & CSS faster than usual.
- Web design inspiration
Recommendation: Site Inspire
If you’re like me that doesn’t just start designing without first of all seeking inspiration from the best places possible, taking a look at Site Inspire will most definitely inspire you.
Recommendation: Adobe Kuler
If asked, I’d say that Adobe Kuler is the best free online color tool there is. As you work with, it presents you with a grid of 5 matching colors and also the choice to adjust it further. You can also upload an image and generate your colors from it. It’s simply intuitive.
Recommendation: Transparent Textures
Though flat is the current trend, sometimes you need to bring your design to life with a little texture. Transparent Textures has a list of gorgeously crafted textures and as the name implies, they’re all transparent. It does have a tool that allows you the independence to instantly test the patterns with the color of your choice before you download them.
Recommendation: Google Fonts
Gone are the days when web designers are stuck with just the fonts that are available on the PC’s , the MC books, and whatever computer the end user might have. Google fonts have changed all that. As your website loads, it will simultaneously present the fonts in use to the browser.
Recommendation: Font Awesome
Who knew that icons will one day come in the form of fonts. Thanks to the the truly awesome font-awesome, it is happening right now. font-awesome eliminates the use of images as icons and that in turn significantly reduces your website’s load time.
- CSS sprites
Spritebox.net gives you that much needed but elusive break by doing the mathematical work involved in the use of CSS sprite method.
Recommendation: CSS3 Generator
Css3generator.com is an “All in one” tool capable of helping you achieve (Generate) all your CSS3 based goals.
It’s of utmost importance to test your work before you start thinking of presenting it to your client to avoid an “Opps!! moment”. Mobile.me is a great place to find out how your work will render on mobile devices. Both landscape and portrait displays. The device options range from HTC ONE, Nokia Lumia 920, Samsung Galaxy Y, Google Nexus 7, to Apple iPad Mini.
Recommendation: Cup Cake Ipsum
Believe it or not, your clients are to you what the audience are to the entertainers. You start failing the moment you fail to connect with your clients, so spice up your work with things that they are familiar with before you present it. If you’re going to use ipsum, why not use one with some humor. If you generate your ipsum from Cup Cake Ipsum, your clients will immediately recognize it as a place holder.
If you have suggestions on what you think we should add to the list, please state it below via the comment form.
Suggestions are welcome and comments are appreciated.