2 DAYS LEFT UNTIL TNW Conference 2021 – join us in Amsterdam for face-to-face business!

The heart of tech

This article was published on May 17, 2011

    Learning Web Design: 82 Resources to Get You Started

    Learning Web Design: 82 Resources to Get You Started
    Joel Falconer
    Story by

    Joel Falconer

    Joel Falconer is the Features Editor at TNW. He lives on the Gold Coast, Australia with his wife and three kids and can sometimes be found g Joel Falconer is the Features Editor at TNW. He lives on the Gold Coast, Australia with his wife and three kids and can sometimes be found gaming or consulting. Follow Joel on Twitter.

    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

    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.

    1. Classic Graphic Design Theory
    2. Graphic Design Principles
    3. History of Graphic Design
    4. The Role of Sketching in the Design Process
    5. The Grid in Web Design
    6. Color Theory
    7. Color Theory (multi-page tutorial)
    8. The Basics of Graphic Design
    9. Complete Beginner’s Guide to Information Architecture
    10. 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.

    Photoshop Essentials

    1. Getting Started with Photoshop
    2. Photoshop Interface Tutorial
    3. Photoshop’s Toolbox
    4. Photoshop’s Pen Tool: The Comprehensive Guide
    5. Photoshop’s Painting Tools
    6. Saving Images for the Web
    7. Using Palettes in Photoshop
    8. Photoshop For Beginners: The Power of Layers
    9. Layer Styles in Photoshop
    10. Photoshop 101 – Adjustment Layers
    11. A Comprehensive Introduction to the Type Tool
    12. Photoshop 101: How to Use the Free Transform Tool
    13. Master Photoshop Selection Tools in Under 30 Minutes

    Illustrator Essentials

    1. Getting Started in Illustrator
    2. Illustrator’s Pen Tool: The Comprehensive Guide
    3. Fun with Illustrator’s Blend Tool
    4. Adobe Illustrator Tips: Live Trace
    5. Illustrator’s Type Tool: A Comprehensive Introduction
    6. The Power of Patterns in Illustrator
    7. Mastering Illustrator Effects
    8. Gradients in Adobe Illustrator
    9. The Stroke Panel
    10. The Pathfinder
    11. The Power of Smart Guides

    Photoshop Web Design Tutorials

    1. Design a Photography Portfolio
    2. Design a Cartoon Style Grunge Website Layout
    3. Create a Grungy Web Design
    4. Create a Sleek, High-End Web Design from Scratch
    5. Create a Latest Tweets Box
    6. Create a Creative Studio Web Page
    7. Design a Business Layout
    8. Design a Dark Business Layout
    9. Create a Professional Web 2.0 Layout
    10. Create a Grungy, Translucent Web Portfolio Design
    11. Design a Sleek Textured Blue Portfolio
    12. Deep in Space Portfolio Layout Design in Photoshop
    13. Create a Clean & Classy Web Design in Photoshop
    14. Beautiful Music Streaming Website Design in Photoshop
    15. Simplistic Black & White Portfolio Layout in Photoshop
    16. Clean and Creative WordPress Style Theme in Photoshop
    17. Simple Business Style Portfolio Layout in Photoshop
    18. How to Make a Rockin’ Website Design Layout in Photoshop
    19. Basics: Create a Clean Magazine & Blog Theme (Day 1: Design)

    HTML

    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.

    1. Getting Started with HTML
    2. University of Texas’ HTML: Getting Started
    3. w3schools HTML Tutorial
    4. Learn HTML & CSS: An Absolute Beginner’s Guide
    5. HTML5 Tutorial — Getting Started
    6. Getting Started with HTML Emails

    CSS

    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.

    1. w3schools CSS Tutorial
    2. CSS Basics
    3. Eric Meyer on CSS
    4. HTML Dog CSS Beginner Tutorials
    5. Learn CSS Positioning in Ten Steps
    6. CSS Easy: Learn CSS The Modern Way
    7. The Difference Between ID and Class
    8. HTML & CSS – The VERY Basics
    9. All About Floats
    10. The CSS Box Model
    11. The SitePoint CSS Reference
    12. Clearfix: How to Clear Floats Without Structural Markup

    JavaScript

    JavaScript gives designers a range of super useful tools, the most common of which have to do with making your website do things outside the capabilities of HTML and CSS. Probably the most ubiquitous example of JavaScript usage in web design is the slider, such as ZURB’s Orbit.

    1. w3schools JavaScript Tutorial
    2. JavaScript for Beginners
    3. 24 JavaScript Best Practices for Beginners
    4. A Beginner’s Guide to JavaScript
    5. Tips on Learning JavaScript
    6. JavaScript for the Total Non-Programmer
    7. Official jQuery Tutorials
    8. jQuery for Designers
    9. jQuery for Absolute Beginners Video Series
    10. w3schools jQuery Tutorial
    11. 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.