Over the last few years, we have seen an explosion of new technologies for web designers to learn that allow us to produce dynamic, engrossing and interactive web sites. If you want to join the party and master web design, this collection of Tuts+ courses is the place to start.
As you’ve probably noticed, being in this industry requires us to be constantly on our toes, and when these new (and sometimes exciting) technologies come to the fore, so we can start getting to grips with them and use them accordingly. As a result, we are always learning and the need to master our craft becomes apparent. Yes, you don’t need to master everything and you probably won’t. But this guide is here because mastering as much as you can in a methodical way that’s relevant to your goals is key.
Most people have no idea of the giant capacity we can immediately command when we focus all of our resources on mastering a single area of our lives.
- Tony Robbins
Applications & Tools
To start us off, lets get to grips with the tools of the trade. We’ve already taken a look at Photoshop in The Modern Web Designer, so let’s delve a little deeper and also take a good look at other applications that we can use for mastering web design.
Before you jump into more complex projects, it's always good to get to know the tools you will be working with on a regular basis. If you're an absolute beginner or perhaps a seasoned pro, learning the basics is a must have. You may realize something you might not have seen before, so it's always good to refresh your knowledge of these tools.
Perfect Workflow in Sublime Text 2
There are a number of text editors out there to choose from, and there’s one that you end up using the most and consider it being your favorite. In this course, Jeffrey Way shows you how Sublime Text 2 could be your next favorite editor.
Photoshop CS6 for Web Designers
Craig Campbell has the inside track on the cool new features that Photoshop CS6 has for your web design workflow, and he’ll show you all of these secrets while designing a website.
Illustrator for Web Design
For a web designer, Photoshop and Fireworks is the traditional choice when designing for the web, but how about Illustrator? In this course, Cheryl Graham takes you on a journey into the world of Illustrator.
Web Design Workflow with Fireworks
Adobe Fireworks CS6 is a powerful tool for website designers. In this course, we go over the basic toolsets included with the software while building a website from scratch.
Photoshop Techniques for Web Designers
Knowing how to use Photoshop is only the first step! Geared especially for new web designers, Ben Gribbin teaches important techniques and workflow tips that are vital to any web professional working in Photoshop.
Design
Now that you’ve learned some of the tools of the trade, let’s find out how to use them even better by creating design projects that you would find yourself doing in the real world.
Mastering Retro Web Design
Once rarely used in this dynamic medium, retro and vintage elements are now becoming more and more popular in a variety of design contexts. If you’ve always wanted to replicate this style, then want no more, as Craig Campbell is here to show you how to create a retro web page using Photoshop.
Web Application Design
Looking to build web applications with Adobe Photoshop? Want to know how to use it more effectively? Head on in to pick up some tips from instructor Craig Campbell.
Advanced UI Techniques
Tired of the theory and ready to get cracking? Join Neil Pearce as he rolls up his sleeves and jumps into the hands-on practice of creating advanced user interfaces and web design elements in Photoshop.
Effective Navigation Design
Navigation is one of the most important aspects of web design. If people cannot navigate through your site, they will quickly leave. Craig Campbell walks you through the steps of how to design three different types of navigation bars using Photoshop.
Effective Landing Page Design in Photoshop
The landing page is the first thing you see when you visit a website, and building a killer one takes a bit of skill and lots of technique. If you’re a web designer, this is a course not to miss.
Design & Build
Knowing how to design and build (code), you find yourself being called a “front-end Developer” and this will be what separates you from the rest — you know, the ones that can’t code or can’t design. If you can do both, then you are certainly on your way to mastering web design.
CSS3 Animations
If you want to learn how to do CSS3 animations, you’ve picked a great place to start. Follow along as we teach you how to do some basic animation using just your code.
PSD to HTML for Designers
Have you ever tried to take a nice PSD design for a web site and tried to translate it to HTML? Not always easy, is it! Here is Adi Purdila to help us learn this sometimes tricky art, where you will be taking an already designed web page layout and developing it into a functional, working web page using intermediate and current techniques.
Effective Navigation Development
In a previous course, Craig Campbell taught us how to design effective navigation elements for our web sites. And if you followed along with that course wondering how you could build each design, now is your chance to learn how as Craig takes all three of those designs and develops them into fully functional navigation bars.
HTML Email Design and Development
Let’s face it, creating HTML emails that are consistent across the majority of email platforms can be a nightmare, with many email programs (Microsoft in particular) having a general disregard of web standards. Here, Craig Campbell will walk you through the process of designing and then developing an HTML email.
Hands on: Design & Build a Coming Soon Page
In this “hands on” course, Adi Purdila shows you how to design and then develop an effective coming soon page.
Responsive Web Design
Almost every new client these days wants a mobile version of their website. Responsive Web design (RWD) is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. In this section of our guide, we take a look at some of the best courses on Tuts+ Premium that will bring you up to speed with RWD and thus, put the icing on the cake to becoming a master web designer. Because RWD is a fairly new technique, please remember to pop back to this guide once a month for new RWD courses and ebooks.
Responsive Web Design for Beginners
Want to get into this relatively new field and learn the basics? Then watch and learn as Ian Yates teaches you the fundamentals of responsive web design.
Responsive Web Design with Foundation
In this course, Craig Campbell walks you through Foundation and how you can use it for your RWD workflow. Is this framework for you? Let’s find out.
Responsive Design
This ebook, “Responsive Design” provides an overview on responsive web design, showing many situations and techniques in which this approach can be applied to mobile devices.
Master Your Workflow, Not The Industry!
Even though this guide is called “Mastering Web Design,” it doesn’t mean you have to learn everything there is to know about this industry or Photoshop, CSS3, HTML5 or anything else that’s on this guide. Yes, it would be nice, but it would be highly unlikely that we could ever do that because of the speed at which this industry changes and evolves. The idea is to think about your workflow, what technologies help you become effective and efficient to allow you to reach your goals, and never stop learning. Someone once said, “Develop a passion for learning. If you do, you will never cease to grow.”
