Web design is a big industry. Hundreds of millions are made by solo designers and agencies delivering tailored services to their clients and theme foundries selling turn-key solutions for platforms like WordPress.
As with any growing industry, where there are people smelling the money, there are people looking for a way in. This article won’t teach you how to become a great web designer, but we’ll run through the skills you’ll need to pick up and where you can learn each of those.
The Theory of Design
Europe’s leading tech festival
TNW Conference is back for its 12th year. Reserve your 2-for-1 ticket voucher now.
Before you dive straight into the web aspect of web design, you should take the time to get a good overview of design theory. It takes people years to fully adopt these principles, but you’ll gain the most by getting these into your brain as a framework for the technical stuff you’ll learn later, so that you’re never caught up in the hype of a new trend or technology and forget what makes great design great.
- Classic Graphic Design Theory
- Graphic Design Principles
- History of Graphic Design
- The Role of Sketching in the Design Process
- The Grid in Web Design
- Color Theory
- Color Theory (multi-page tutorial)
- The Basics of Graphic Design
- Complete Beginner’s Guide to Information Architecture
- The Principles of Beautiful Web Design
Photoshop & Illustrator Design
It all begins with the concept, and the way most web designers finalize the concept before going into production is by creating comps in Photoshop and Illustrator. Usually, Photoshop is where most of the comp is done, with the designer calling on Illustrator when they need better vector tools to create a logo or icons for the site.
There is, of course, a growing movement that encourages designers to design in the browser. I think that’s a good movement, but I also think you’re better off getting some practical experience creating layouts in a more visual environment like Photoshop before you head down that road.
- Getting Started with Photoshop
- Photoshop Interface Tutorial
- Photoshop’s Toolbox
- Photoshop’s Pen Tool: The Comprehensive Guide
- Photoshop’s Painting Tools
- Saving Images for the Web
- Using Palettes in Photoshop
- Photoshop For Beginners: The Power of Layers
- Layer Styles in Photoshop
- Photoshop 101 – Adjustment Layers
- A Comprehensive Introduction to the Type Tool
- Photoshop 101: How to Use the Free Transform Tool
- Master Photoshop Selection Tools in Under 30 Minutes
- Getting Started in Illustrator
- Illustrator’s Pen Tool: The Comprehensive Guide
- Fun with Illustrator’s Blend Tool
- Adobe Illustrator Tips: Live Trace
- Illustrator’s Type Tool: A Comprehensive Introduction
- The Power of Patterns in Illustrator
- Mastering Illustrator Effects
- Gradients in Adobe Illustrator
- The Stroke Panel
- The Pathfinder
- The Power of Smart Guides
Photoshop Web Design Tutorials
- Design a Photography Portfolio
- Design a Cartoon Style Grunge Website Layout
- Create a Grungy Web Design
- Create a Sleek, High-End Web Design from Scratch
- Create a Latest Tweets Box
- Create a Creative Studio Web Page
- Design a Business Layout
- Design a Dark Business Layout
- Create a Professional Web 2.0 Layout
- Create a Grungy, Translucent Web Portfolio Design
- Design a Sleek Textured Blue Portfolio
- Deep in Space Portfolio Layout Design in Photoshop
- Create a Clean & Classy Web Design in Photoshop
- Beautiful Music Streaming Website Design in Photoshop
- Simplistic Black & White Portfolio Layout in Photoshop
- Clean and Creative WordPress Style Theme in Photoshop
- Simple Business Style Portfolio Layout in Photoshop
- How to Make a Rockin’ Website Design Layout in Photoshop
- Basics: Create a Clean Magazine & Blog Theme (Day 1: Design)
HTML is the foundation on which all websites are built. On its own, HTML doesn’t have much to do with how your design looks, but it describes the structure of your design’s information to the browser, which is then styled by CSS.
HTML is incredibly easy to learn, and if you’ve got a good memory you can probably have everything you need to get started at a bare minimum learned within an hour.
- Getting Started with HTML
- University of Texas’ HTML: Getting Started
- w3schools HTML Tutorial
- Learn HTML & CSS: An Absolute Beginner’s Guide
- HTML5 Tutorial — Getting Started
- Getting Started with HTML Emails
CSS, or cascading stylesheets, are a way of describing the appearance and styling of every element on your web page. This is where the bulk of the web designer’s visual work is done after the Photoshop comps are done.
If there’s one thing to really get to know, that’d be CSS.
- w3schools CSS Tutorial
- CSS Basics
- Eric Meyer on CSS
- HTML Dog CSS Beginner Tutorials
- Learn CSS Positioning in Ten Steps
- CSS Easy: Learn CSS The Modern Way
- The Difference Between ID and Class
- HTML & CSS – The VERY Basics
- All About Floats
- The CSS Box Model
- The SitePoint CSS Reference
- Clearfix: How to Clear Floats Without Structural Markup
- Official jQuery Tutorials
- jQuery for Designers
- jQuery for Absolute Beginners Video Series
- w3schools jQuery Tutorial
- Learning jQuery
Go Get Rich!
You’ve got all the tools you need to get started on your quest for riches! There’s a lot to learn between now and gaining the knowledge and experience that’ll enable you to build a comfortable living as a designer, but if you dive in, stick at it, and don’t hold yourself back, it’s more than achievable. I know really young guys who make tens of thousands of bucks a month selling their themes on online marketplaces or simply servicing clients — if they can do it, with enough determination, so can you.