When designing and building a website there are a number of online tools that you can use to help make your life a little easier and to produce a better end product.. Here is a list of five of the most useful.
Astuteo – Web Development Project Estimator
Astuteo Web Development Estimator is a handy little tool that allows you to input your hourly rate and then choose how long you will take performing tasks such as Design Research and HTML+CSS Development. It will then calculate how much the project will cost to complete. Although there is a good selection of tasks that you can use you can also customise the form by adding in extra options. So for example I might add in extra tasks for 3 months search engine optimisation or social media advice. You can then print off your estimates.
Colour Scheme Designer
Colour Scheme Designer is an online colour wheel that enables you to create colour palettes for your projects. You enter a hexadecimal RGB value and then the nifty software will show your palette of beautifully blended colours. There are a multitude of settings but one feature that I like is the random palette generator. This can sometimes be useful when you are lacking inspiration. Once you have decided on your palette you can export it in various formats, the most useful to me are the HTML+CSS and also as an ACO Photoshop palette.
Google Fonts
With over 600 fonts to choose from Google Fonts is a great resource to help you to find the right kind of font for your project. They are all free, open source and already optimised for web use. You can test the fonts in a variety of ways, as a single, word, sentence, paragraph or poster. You can also set the font size so you can get a really good idea of how they will look on the page. You can use preset text such as “The quick brown fox jumps over the lazy dog” or you can try it with your own text. Once you have chosen your font you Google are good enough to provide you with the code to your HTML or CSS files.
CSS3 Click Chart
CSS3 helps you to add great features to the look and feel of your websites without all the problems with file sizes that graphics bring. The problem with CSS3 is that there are so many attributes for you to try to remember. One solution is to keep a good reference book on your desk, but books become out of date very quickly. So a site like CSS3 Click Chart can be very useful. It shows you examples of code for a wide variety of elements and their accompanying attributes, providing you with sample code and a demonstration of the feature in action.
Favicon Generator
Favicon’s are those little images that you see on the tab of your browser that mean that when, like me, you have about twenty tabs open and you can no longer read what the page title is you can get a visual cue from the favicon so that you can switch easily between tabs. The file type that is used for these is .ico and you can generate them using Favicon Generator. All you need to do is upload a square image and you are returned with your very own favicon. Favicons help to make your website look that little bit more professional.
Website Design can be a laborious task at times but hopefully these tools will help to make your working day a little easier.