Tools I use during Website Development

In this post we are going to discuss about the tools I use during website design and development process. This involves many tools, most of them are installation and few tools are addons and few available online. All right, I start listing out them with bit of information and link (if available online).

The very first part starts with mockups or simple layout of home page and other pages.

Mockup tool
A Google chrome extension. Moque allows us to export designs in pdf formats

Adobe Photoshop
adobe photoshopAdobe Photoshop, needless to even utter a word or explain about its powerful and vast features. World is changing and so the Adobe Photoshop features are growing.

Gimp (the Gnu Image Manipulation Program)
gimpA simpler and free Adobe Photoshop alternative. Only difference between Adobe Photoshop and Gimp is the former is available for payment and the Gimp is completely free and has many add-ons and extensions.
Sorry, but I can only provide Gimp link:

Color Combines
color combosAny design or interface be it a website or an app for a mobile or a desktop interface, where it involves humans strictly needs to be good in colors that are eye-catchy and smooth. Hence, for this I use two online options

* Color Combos, an online tool for finding and as well as creating best matching colors. An extensive color combinations are available as preset and many combinations are and had been created by users of this feature over time. You can do things like finding the color combination for your preferred base color, create your own combination, save the created color combinations in an image format and desired design.

* Kuler from Adobe. This is also available in Adobe Photoshop CS6. adobe kulerThough this plugin is within Adobe Photoshop it connects to online of its own version. One interesting feature is the preset Color Rules like Analogous, Monochromatic, Triad, Complementary, Compound, Shades and Custom. Wait, that’s not it! If you are feeling too lazy or confused about the colors to combine, get the color combination from image by uploading it using the camera icon on the right side. You can save your color combination too. I recommend using this tool online even if you have Kuler in your Adobe Photoshop for more feature.
Online version is at Kuler @ Adobe

Before I put down a brief about the code editors I use now, I must accept that I did not jump directly into these two below mentioned code editors. Instead, I had worked on some of the greatest code editors like Macromedia and Adobe Dreamweaver, Netbeans, Aptana Studio. They had voluminous features those I rarely needed or used and I’m not a person who love to occupy my PC’s RAM unnecessarily. Hence, I got down to…

notepad++A very light code editor and I love its color schemes that makes coding more easier for the eyes. I would recommend to a fresher who has started programming. Because it does not clearly suggest the codes or syntax which will help to get the code and syntax into the head.
Link: Notepad++

Sublime text 2
sublime text 2I came to know about Sublime text2 after notepad++. And felt that this is much more powerful than my previously used code editor. Like Notepad+ this too has color schemes to sooth our eyes, moreover the suggestions are really helpful. It supports all the major programming languages and has a lot of shortcuts to ease our coding. There is a free version and registered one.
Link: Sublime Text 2

colorpickerAnother Firefox addon, Colorzilla. Use this to extract colors from websites and its other elements. It has many option of output like HTML code with and without pre-fixed hash (#), RGB (Red Green Blue) code in percentage, individual RGB value, HSL (Hue, Saturation, Lightness/Luminosity), etc. We even have color palette browser and CSS3 gradient creator link which takes to its website. I will brief out this creator shortly.
Link: Colorpicker

CSS3 Gradient Generator
Ultimate CSS Gradient, online tool provided for free by the same author of Colorzilla. Since, most website or web page elements are rendered by CSS3, even gradients are generated by CSS3 rather than image. From this website you could get pure CSS3 gradient. We can either select gradient from the available preset gradients or create our own and save for future or for the benefit of other users. This definitely saves time. Everyone should try at least one, and will be happy for sure.
Link: CSS3 Gradient generator

CSS3 Generator
Another online generator for multiple CSS3 properties. Box shadow, text shadwo, box resize, box sizing, border radius, columns, and some features are under development and will soon be available. A really easy option to do the CSS related coding quickly. This free online tool was brought to us by Randy Jensen.
Link: CSS3 Generator

firebugMostly called as Inspect tool. A Firefox addon which saves millions of lives everyday; those into website or web page programming. This lets us to see the source code in the hierarchical manner and allows us to add or change codes (non programmatic) and preview them immediately. Are you asking is that all the features? The answer is ‘No’. There are many features which you will to enjoy.
Link: Firebug at Mozilla

This is similar to Firebug but not flexible when it comes to element or tag choice. But nevertheless, this is also powerful in its features like download timeline for the attached files and elements with the view document. Screen size testing as per specific devices. This comes with Google Chrome browser.

measureitThis one is a simple measuring tool available as Firefox addon. I use it for measuring the gaps and blocks to make the proper look while doing the design conversion from JPG format to either HTML or WordPress theme.
Link: Measureit at Mozilla

Web Developer Extension
web developer addonYes, the name of this addon is Web developer Extension. This is useful for those who have the practice of defining IDs and Class for DIV tags at first run and then writing CSS for them at one shot. As I indicated in the previous line, we have to code down all the DIVs or container and then write all the necessary CSS for the IDs and Classes for the respective elements in the web page. The CSS are written and the results are real-time because we code the CSS in this addon’s window as sidebar to the browser.
Link: Web developer @ Mozilla

web browser iconThere are numerous in this world and to name them few; Mozilla Firefox, Google Chrome, Safari, Opera, Maxthon, etc. Oh sorry, I forgot to mention Microsoft Internet Explorer; the one most helpful browser that helps to download wonderful good browsers available online.

filezilla ftp clientA simple and quite fast client to transfer files. Previous to this, I used Cute FTP client but was not comfortable like this. Of course there are few features might be missing but while comparing other FTP clients but this one does the job for me and the updates bring up new features every time, steady but sure. 🙂

Well, these are few often used tools during designing web pages and even a whole website. They are handy time to time. Also, these are not the sole tools that are used by designers but, yes, mostly used. Now, if you have missed any of these tools, try it and let me know what you feel about it. And, if I have missed or you use which is not listed do point out the tool in the comment. I will definitely be interested to try out my hands on.

And as usual thanks for reading,
Keep Sharing!

P.S: Logos, trademarks, brands and all alike those mentioned above in this post belongs to their respective organization or team or author.


Post Author: Shreyo

is a developer & involved in project management; loves to learn, guide and keep himself updated on UI/UX and WordPress. He is also an amateur photographer mostly macro shots.
  • Wow! i am not a web developer at all but it nice to read about the tools used during web development. I want to know how you manage all these tools and which one is most important in web development.