COMP126: Practical Web Design & Development for Everyone
Design & Development Tools
testing: validation, accessibility, usability
Periodic Table of the Web Design Process
This clever table visualizes the professional web design process, from design brief to mockup to build and deployment.
HTML Validator by W3C
The official W3C interface to error-test and validate your HTML.
CSS Validator by W3C
The official W3C interface to error-test and validate your CSS.
Usability Checklist
This helpful checklist allows you to identify and address common usability problems before you deploy your site.
The W3C’s Web Accessibility Initiative: Evaluating and Testing for Accessibility
This important resource helps you evaluate your site’s accessibility so you can address any issues prior to deployment.
CSS Tricks’ Recommended Accessibility Testing Tools
A run-down of some of the most useful tools for testing your website for its accessibility to disabled and differently abled users and assistive technologies.
Google’s Mobile-Friendly Test
Is your site sufficiently mobile-friendly? Google would be happy to tell you (and to know).
Website Speed Optimization Guide
A very useful guide to optimizing your site’s speed and performance.
PageSpeed Insights, also from Google
Quick test for speed and performance on different devices.
Nibbler
Nibbler will test any website for a variety of things, including accessibility and SEO.
Google Analytics
Google will spy on your website, but it will also use that information to give you lots of useful information about traffic, visitors, clicks, and so on.
images
Optimizilla
Online image compression tool. Shrinks JPEG and PNG images as much as possible without significant loss in quality.
TinyPNG
Another nifty tool for compressing image files.
favicon.io
Easily create tiny little favicons for your browser tabs!
The Creative Commons
The Creative Commons search interface allows you to search for media across a number of image and other media hosting sites, based on what you plan to do with the media once you get it.
Archive.org
Archive.org offers lots of free audio, video, and images posted by others, and it’s also an easy, free, and reliable to host media files so you don’t have to include them in your projects.
Unsplash
Free high-resolution photos.
The Stocks
Royalty-free stock photos.
Pixaby
Hundreds of thousands of free stock photos, vectors, and illustrations.
Subtle Patterns
Free, high quality textures and background patterns.
Startup Stock Photos
If you need to depict a tech or startup environment, here are all the free tech workplace stock photos you could ever ask for.
color
Coolors
This is a fun, interactive, customizable color palette generator with a lot of options. Your professor uses this one a lot.
Material Palette
Fans of material design will love this one. Generate a Material-inspired palette for your site.
Flat UI Colors
Another good starting point to generate a “flat” design color scheme.
Colorhunt Palettes
If you have no idea where to start building your color scheme, Colorhunt can help.
LOL Colors Palettes
Curated color palettes for inspiration and reuse.
Paletton
A widely used and very popular tool. Allows you to create color schemes based on current best practices.
UI Gradients
Collection of beautiful color gradients, all free to export and reuse.
Paletton
A widely used and very popular tool. Allows you to create color schemes based on current best practices.
0to255
This one helps you find variations (tones, tints, shades) of colors you’ve chosen. Very useful when designing hovers, borders, and gradients.
Beautiful Box Shadows
Box shadows can be pretty ugly. Here's a collection of nice ones, all ready to use.
typography
Responsive Website Font Size Guidelines
A guide to current best practices.
A Pocket Guide to Typography
Learn all about typography standards and best practices here in no time at all.
Beginner’s Guide to Choosing Web Fonts, from Google Design
However you feel about Google, this guide is an excellent introduction to the wide, wide world of web fonts.
Google Fonts
Google’s huge library of free web fonts. They almost make it too easy.
Fontsquirrel
Another huge and very popular source of free web fonts.
TypeTester
This application allows you to test and compare more than 2000 web typefaces.
What Font Is Best for You?
A super useful infographic to help you choose!
Canva's Ultimate Guide to Font Pairing
Nothing else needs be said.
Fontpair
A pairing guide for Google Fonts.
Fontjoy
Another good font pairing resource.
10 Iconic Fonts & Why You Should Never Use Them
Believe them.