25 Useful Online Tutorials for Novice Web Designers

1 Feb, 2012  |  Written by  |  under Web Design, Web Design Resources

If you talk with any web designer who began creating sites in the 1990s, you may learn that the real issue to overcome is browser compatibility. But, even that issue can be resolved by using pre-formatted content management systems (CMS) such as WordPress or Blogger. If you intend to design sites, rather than develop sites, you still need to learn certain basics. Those foundations include items such as accessibility (making a site accessible to the masses, including those individuals with hearing, sight, and other disabilities), usability (ease of use), and mapping — otherwise known as navigation. The following list of 20 useful online tutorials can help any novice web designer learn the ropes.

The Bare Bones

Smashing

  1. A List Apart: This site explores the design, development, and meaning of web content, with a special focus on standards and best practices.
  2. Jakob Nielsen’s website: Nielson’s site, useit.com, is packed with information about web site usability, or the capability of being able to navigate and use a web site logically. The site includes articles, essays, tips, and an extreme perspective on why he doesn’t use graphics on his site.
  3. Usability.gov: This is the U.S. government’s guide for developing usable and useful web sites. This site was developed to specifically assist web managers, designers, usability specialists, and others create web sites that are highly responsive, easy-to-use, and useful.
  4. W3C: This acronym stands for World Wide web Consortium, an international community where member organizations, a full-time staff, and the public work together to develop web standards. Standards include code, compatibility, accessibility, and usability. All your basics are included in this site, although sometimes it may be difficult to understand them. Never fear, as W3C also has a “schools” site, where beginners can get a quick grasp on the basics.
  5. web Accessibility Initiative: Learn about all the resources available to you to create sites that are accessible to the masses. Tim Berners-Lee, W3C director and inventor of the World Wide web (WWW), provides the backbone to this initiative, which reaches out to people with disabilities in its universality.
  6. webAIM: web accessibility training is available for free on this site. This site also provides tools such as web site certification about the level of your site’s accessibility, and a tool that you can use to learn more about how to make your site more accessible.

Design Tools

PHP

  1. Blueprint: This site provides designers with a CSS framework, which is a solid foundation to build your project on. It comes with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
  2. Color Palette Generator: A simple and easy tool to use. Upload a photo and the tool will generate colors that match that image. Great tool for deciding upon link and heading colors based upon a logo’s colors.
  3. COLOURlovers: This is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles. Great tool to help decide color schemes for web sites.
  4. CSS Basics: This code was invented to help separate style from content, and that move was based upon the impetus to create valid, accessible, and more usable sites. This site contains all you need to know about CSS, and it’s a free download. Or, you can just take one chapter at a time from the menu to the right.
  5. Em Calculator: This is a small JavaScript tool that helps make scalable and accessible CSS design. It converts pixels to relative “em” units, which are based upon a text size.
  6. HTML Dog: This site offers free tutorials on HTML, XHTML, and CSS. The idea is to take the somewhat convoluted official specs for XHTML and CSS and present them in a much more readable fashion.
  7. W3C CSS Validation Service: Since we hope you’ll be using more CSS than HTML for design, this tool can help you get the code right. If you need an HTML validation, W3C has that tool as well.

Web Building Sites

HTML5

  1. BoogieJack: Dennis Gaskill, the author of web Site Design Made Easy (now in its third edition), created this site to help other designers. Topics include web design tutorials, free graphics, custom graphics, SEO, and sound effects. The topic expertise levels range from beginners to pros.
  2. HTML Goodies: HTML Goodies intended purpose is to help new and growing website developers learn their trade, and to provide them with tips, guides and reference sets for their use as they become more accomplished. They’ve arranged the site into sections that range from a completely non-technical introduction to the concepts involved in developing websites all the way through to keyword references.
  3. web Design / HTML: This About.com site, maintained by Jennifer Kyrnin, tackles all the basics, including information you should know before you begin to design a site. Jennifer also tackles complex information such as color and code.
  4. web Design Library: This site has numerous resources that help designers with web site design issues. They cover design basics, CMS, Photoshop, vector graphics, HTML, CSS, and other features with tutorials and links to other helpful materials.
  5. web Developers Handbook: Bookmark this site to make your design life easier. Categories include creativity, CSS, color theory, royalty-free photos, and AJAX. But, there’s so much more, including code snippets, articles, and a special section for usability and accessibility.
  6. websites for Beginners: This site is out of the UK, but that’s ok…all the topics and answers are the same, including design, budgets, web hosting, earning money, search engines, and progress. Plus, this site offers free photos and links to other resources.

General Tips

    Nick La
  1. 10 Common Mistakes Made by Novice web Designers: This article and the following comments provide tons of information to go from. Plus, novice designers might want to become familiar with Sitepoint, where many designers and developers meet to hash out issues, and to buy and sell domains, and to learn about jobs and courses.
  2. 10 Video Tutorials for Learning Basic web Design Skills: Mashable is another site worth knowing, as they offer up-to-date information about web businesses as well as information on how to conduct business online. Learn the latest trends, including information about content development and web design. Although this article is from 2008, the basics still apply.
  3. 30 HTML Best Practices for Beginners: Nettuts+ offers tons of tutorials, but this one in particular caught our eye. If you have one year of experience or less under your belt, hopefully some of the tips listed here will help you to become better, quicker.
  4. Design Instruct: This regularly updated web magazine was created specifically for designers and digital artists. It’s filled with design tips and tricks, and they feature high-quality tutorials from some of the top designers and digital artists from around the world. They also offer news and free and downloadable resources.
  5. Six Revisions: This site publishes practical and useful articles for designers and web developers. They seek to present exceptional, noteworthy tips, tutorials, and resources that the modern web professional will appreciate.
  6. web Pages That Suck: This site has been around for what seems like forever. They’re especially noted for bringing the worst web pages to light, so you can avoid repeating their mistakes. And, you can only hope that your site design isn’t singled out.