Web design tools

Free tools to help webmasters to build a website and improve its appearance and ease of use. Content management systems, themes and plugins for CMS are not included in this list.

SVG Edit
Online editor of SVG images, works in the browser.

Diagram.ly
Online editor to draw diagrams, very intuitive. It has no more features than Inkscape or LibreOffice Draw, but is somewhat simpler and can be used anywhere, with a smartphone or a connected tablet.

Texter
Make text effects with this online tool by writting following a shape designed by the mouse.

Logo Maker
To create 3D titles, online tool on this site.
It is also possible to create embossed logos with the Script-Fu menu of Gimp, or like in this page with SVG code inserted into the HTML code. See the XML folder in this site.

Chart tools
These Google's tools build charts from your data you can include on your pages with a JavaScript code.

MyPaint    
This software is the best suited for drawing freehand while Gimp is more developed for transformations. It stabilizes the movement of the mouse to a brushstroke without trembling like on paper. In fact, even Photoshop users may prefer MyPaint for pure drawing. Its simplified interface requires to only focus on the image and its multiple brushes replace filters and other tools.

beFunky
A simple way to enrich a web page: Turn photos into drawings with one click (Line artopia effect). To do this you have just to load or share a photo for an instant processing! You can also make a HDR.
Your videos may be converted to cartoons too.

DevianArt Muro
Free online drawing tool built in HTML 5 with basic functions but a lot of filters. The image at right is an example of artwork you can make with the editor on the right.
Works better with Chrome.

Picozu
Less well finished than the previous one, but it is more user friendly. Based on HTML 5.

• With Inkscape it is possible to create designs for a web page. This tutorial on drawing a helicopter shows how. The principle can be extended to any other object, with the advantage of vectors: one can easily change the image for reuse. You also draw logos in SVG.

Comix Editor
Simplistic comic editor in HTML. The idea is to modify predefined objects. The editor requires Chrome.

Image Analyzer 
Image processing, does not allow drawing but various improvements on existing photos such as morphological operations.

Favicon
Tools to make the small image.

Browser Turns Editor
Plugin for Firefow that edits a web page directly useful for the development and arrangement of elements.

CSS 3 Maker
Generator for CSS 3 style of various attributes.

• Measure it
  Displays a ruler to help position elements.
• Pencil
  Diagram editor and GUI prototyping.
• TinyPNG
  Online service to compress PNG images like JPG while keeping transparency. The resulting image is still in PNG format. If you prefer to use a local program, there is pngnq.
• Scratchpad.io
  Interactively test a style sheet and HTML code. Made with Ace editor and Firebase.
• Browsershot. Viewing your pages on various browsers and operating systems
• See all the plugins for webmasters that can help to improve the design of a website.

Where to find free images?

Kits and templates for web pages.

• Webfont
  Add system-independent fonts to your page, requires a JavaScript code.

See also...

• Tools for webmasters.