Free Web Design Tools

Jennifer Xue
Website designing
Learning web design

Like in any other profession, being a web designer requires continuous learning. It pays to be extra knowledgeable about tools that can help make your creations stand out. Consider adding these twelve free tools for web design (plus one "sister site") to your arsenal, working to take your skills and designs to the next level.

Built With

If you're curious about a site's design framework, its DNS, and apps installed, try Built With. Simply type the URL of the site in question and hit "look up." The result will show what elements are installed, allowing you to use that information to create or embellish your own web designs. This tool is extremely handy whenever you get so awestruck by an impressive site and become curious about the "engines" behind it.

Tip: Start with testing your own site and other popular sites to see the "back-end" apps used.

W3 Schools

W3 Schools provides tutorials, references, and examples for building web pages on the client side and the server side with HTML, CSS, JavaScript, SQL, PHP, ASP, Node.js, XML, XQuery, and others. It also provides various web templates, statistics, and certificates that you can immediately apply to your site. Just select the lessons you want to learn, click "demo" and "try it yourself." You'll be taken to a page that shows the HTML codes used, which can be compared to the "front end" design for learning purposes.

Tip: If you're a self-taught person, this site can truly improve your skills.

WAVE Web Accessibility Evaluation Tool

Can persons with disabilities effectively use your site? To find out, use WAVE. You just need to type in the URL and click "return." The WAVE engine will provide a summary of any errors, alerts, and structural elements that can be used to improve the site's overall accessibility.

Tip: WAVE is just one of numerous accessibility evaluation tools out there. It's one of the easiest to use and doesn't require registration.

HTML Code Editor

Preview how your HTML code really looks like for front-end users so you know what's missing or broken, if anything. To use this free HTML Code Editor, simply type in or copy-paste the HTML code into the box on the left; the preview will show on the right.

Tip: The tag wizard comes with pre-coded tags that you can use to be included in your project. You can add your own tags as well.

Browser Shots

With so many browser apps on numerous devices, how can you be sure that your site looks good on them all? Try Browser Shots. Type in your live URL and select the browsers to check, including multiple versions on different platforms.

Tip: It may take a while for the previews to come up, so be patient.

Creative Commons Search

Creative Commons Search is a portal for locating images, videos, and music clips under Creative Commons rights. Digital assets licensed as such oftentimes can be used freely for both personal and business uses, including sharing and adapting as long as you provide a credit to the creator and indication if changes have been made. Be sure to double check the version of the Creative Commons license, as permissions can vary. This portal includes direct search to popular sources, like Flickr, Google Images, SoundCloud, YouTube, Pixabay, Jamendo, and others.

Tip: Locating Creative Commons assets on this site is very convenient. You no longer need to jump from site to site to look for royalty-free elements to use.

Psychology of Color in Marketing and Branding

Published on Entrepreneur.com, Psychology of Color in Marketing and Branding is a comprehensive article exploring how color can impact the user experience. This is invaluable to a web designer. After carefully reading this piece, you can use the information to brainstorm and educate your clients that sometimes what they like might not be the best colors to attract the intended visitors.

Tip: Keep this article handy when discussing color palettes with your clients.

Color by Adobe

Color by Adobe is one of the best color wheels out there. You can easily drag the cursor anywhere to change the color schemes. You can use the rules of colors or explore ready combinations and themes. With literally thousands of color combinations, there must be one that you or your client will love.

Tip: Play around and be amazed at the infinite choices available. You can use this web tool without signing in.

Gratisography

Find free high-resolution pictures for personal and commercial purposes without any copyright restrictions at Gratisography. The whimsical category is hysterical, which is ideal for finding light-hearted and funny images for blog posts or any other projects.

Tip: Be aware that there are paid images linked from Shutterstock. Those aren't free and you must have an account with Shutterstock to download them.

Mockupworld

Mockupworld is the place to find mock-ups of smartphones, laptops, T-shirts, books, signs, billboards, and packages. These are blank images onto which you can add your own or your client's logos or images.

Tip: Mockupworld offers both free and paid mock-ups of anything you can imagine. If you sign up, you can download anything on their site for free for seven days.

Texture King

To illustrate a website, sometimes you need to create images with textured backgrounds. Texture King gives away tons of images of dirt, plaster, concrete, rust, wood, paint, stone, rock, metal, plastic, liquid, and many others. When you combine those images with other images, the result can be breathtaking.

Tip: The images are available under Creative Commons, meaning you must attribute the source and the resulting work can't be redistributed without prior permission.

Brusheezy

If you use PhotoShop or a substitute like Pixelmator, you will find these PSD brushes, patterns, and textures offered for free by Brusheezy useful. They can be used to create new images and manipulate existing images with professional results. Sister site Videezy provides free video clips, which are also very useful when designing sites with a video header.

Tip: While the digital assets offered at both sites are available under Creative Commons, these sites also sell paid images by Shutterstock. Be aware of the paid sections, so you don't mistakenly download paid assets.

Lifelong Learning for Web Designers

Many web designers are self-taught. With so many free tools and resources online, there is no excuse not to upgrade your skills. You simply need to look and search for specific things that you need. Most likely, they're available without cost (at least during the trial period). Happy learning!

Free Web Design Tools