Editor

Pete Wood

Contact Us

We love to hear from all our voato readers. We especially look forward to recieving ideas and tips for simplifying life.

Suggest something using the contact page

Email us at coolstuff@voato.com

Tweet us at
@voato
Home > Mac, Web Apps, Web Design > Free tools and resources for web designers and developers

Free tools and resources for web designers and developers

May 31st, 2010 Pete Wood

image In this ultimate guide of design web sites, I’ve rounded up 30 of my favourite resources I use for putting together web sites.  You’ll find a whole hodge-podge of recommendations here including CSS design, cross browser testing, color palettes, browser plug-ins,  and so much more. I’ve also included some my favourite web sites for inspiration, and tools for the budget developer.

1 image

Color Trends and Palettes
Useful for checking which colors and patterns go together and selecting a palette for a particular occasion. Allows complex merging of different patterns and schemes to generate some truly beautiful results.

2

image

Lorem Ipsum
Generate dummy text which is useful for checking page layout.  Lorem Ipsum uses a more-or-less normal distribution of letters to the content looks realistic and authentic.

3

image

Load Impact
Load Impact is an online load testing service that lets you load test your website with just a few mouse clicks. Test the speed, number of concurrent connections, and concurrent client connections.

4

image

Typetester
Change font styles, sizes, alignment, tracking, decoration and compare three different variations.

5

image

IP Tools.
Check for DNS Lookups, IP Routing, WhoIs, Trace Routes etc

6

image

CSS Accessibility and Standards Links
CSS Tutorials, guides, and examples.  Links to industry books for web design and redesign.

7

image

Firefox Font Finder
Finding the fonts used by a site you like the look of used to be a simple affair by looking in the associated CSS files.  With this great add on to fire fox, all you need to do it right click and the dialog gives you all the font information.

8

image

Sketch Templates for Wire Framing Web Sites
Provides some good sketch templates for roughing out a web site design on paper. Ideal for story boarding and includes templates for iPhone Apps.

9

image

Top 10 Mistakes of Web Design
Top 10 list of the biggest mistakes, web design disasters and HTML horrors.

10

image

25+ Useful Infographics for Web Designers
Infographics can be a great way to quickly reference information. Many provide information that might be of interest to designers and some just present data that might be interesting to those who design websites all day.

11

image

Color Theory for Designers
A great guide to the implication of the colours you use on a website.  Gives good examples and cool, warm and neutral color schemes.

12

image

21 Amazing CSS Techniques You Should Know
Here are 21 amazing CSS Techniques that you might not have thought could be done by CSS.

13

image

Resources for Web Design
Fantastic selection of links to a wide range of web design resources including HTML, CSS, PHP, Site Submission, SEO, Web Content Accessibility, JavaScript, Image processing, and so on.

14

image

27 Must-Have Starter Kits For Web Designers
Starter kits are great timesavers for web designers and they are particularly useful for those who often create mock-ups for project pitching on daily basis.

15

image

CSS Heaven
A simple web design gallery for inspiration to any budding web designer. 

16

image

10 Google Chrome Extensions for Web Developers
With Google Chrome extensions, you can add more features to the browser to help you with designing, debugging, and working on websites.

17

image

Free Industry Tools Alternatives
Free alternative tools to Photoshop, Dreamweaver, Adobe Premiere and Flash.

18

image

CSS Cheat Sheets
Two useful cheat sheets for CSS vertical and horizontal alignment.

19

image

CSS Formatter and Optimiser
Clean up and optimise any CSS files.You can either upload a complete CSS file, or cut and paste a selection.  Choose from 5 levels of compression.

20

image

Screen Sizes and Safe Areas
Compare safe areas for website design across Windows and Mac browsers. Downloadable PSDs provided to guard against excessive scrolling.

21

image

50 Useful Tools and Generators for Easy CSS Development
A superb collection of 50 tools to help design and develop CSS styles and layout.  Includes tools for generating menus, Wordpress themes, tabs and so on.

22

image

The Best Social Media Icons All In One Place
A one-stop-shop for icons.  A great collection of all the best social media icons in one handy location.

23

image 

Online CSS SandBox

Experiment with different CSS settings and watch the changes appear immediately on the sandbox desk.

24

image

Fine Icons
Fine crafted stock icons. Small, simple and sharp. Download FREE for personal and commercial use.

25

image

111 CSS Gallery To Submit Your Design
Gain Inspiration from 111 beautiful hand selected CSS designs.

26

image

51 Form Element Resources and Tutorials Using CSS And Javascript
Create outstanding and beautifully designed form elements from scratch

27

image

30 Inspiring Dark and Sleek Web Designs
The skilled use of color gradients, lighting and glow effects, and details such as inset pixel dividers can lead to a gorgeous and sleek web design.In this collection, you’ll find some terrific and inspirational examples of dark and sleek web designs

28

image

Font Tester
Change all the attributes of a font and watch the screen updated instantly and compare against different designs.

29

image

15 Free Online Tools for Web Designers on a Budget
A neat collection of tools for image editing, font creation, testing web sites and so on.

30

image

A Roundup of 22 Cutting Edge PSD to HTML Tutorials
These 22 tutorials are a great starting point if you’re interested in learning how convert Photoshop PSD to HTML.

 

What design resources do you rely on for web design?

         

  1. Pete Wood
    June 29th, 2010 at 19:23 | #1

    Please feel free to leave some comments, they’re always welcome.

  1. No trackbacks yet.
All comments are moderated so anonymous posts are welcome and encouraged.
  
  
  

Switch to our mobile site