How to Learn to be a Web Designer
So you want to learn to be a web designer, eh? Well, the first step is to put on your pajamas and brew a pot of coffee. Then fire up your laptop and kick your feet up onto your desk. Take a deep breath and smile. Life is good! How hard could this be after all?
Wakeup call for wanna-be web designers
Web designing is awesome. I love it. I pinch myself because I can’t believe I get to do this for a living. Really. It rocks.
But if the reason you want to be a web designer is because you get to fulfill all the stereotypical cliches of working from home, I’ll tell you right now, that’s not gonna cut it.
You’ll soon find that, like any other profession, web design is work. It’s difficult. It’s brain-grindingly challenging and will often place you right in the middle of a tangled forest of seemingly never-ending problems that you are tasked with hacking (no pun intended) your way out of.
Simply put: you won’t make it. You’ll give up and you’ll be broke, because there’s gonna be someone else out there that wants it more, is smarter than you and can do a better job of delivering a better product, in a quicker timeframe and for less money.
And if you plan on being a freelancer, there’s a whole other world of problems to tackle: taxes, invoices, proposals, never-ending phone calls and emails… don’t get into web design if you’re just looking for an easy way out of the rat race. There’s no such thing.
Where to start
Now if I haven’t scared you away yet, it’s either because you skimmed that last section, don’t believe me or maybe, just maybe, have what it takes to deliver high quality, executive-level, error-free, beautiful and timely websites and web solutions to the awesome clients that deserve them.
So if you’re still here. This is where I recommend starting your journey: Learn HTML and CSS
Website developers can land in many camps. Some are PHP-junkies, other prefer Coldfusion or Microsoft .NET framework. From there, it’s common to focus in on particular content management systems (CMS) like Drupal, Joomla, or my favorite: WordPress.*
But no matter what you end up specializing in at the end, it all begins with the basics of HTML and CSS.
The Basics
HTML provides the core building blocks for everything else on the internet. You’ll learn about inline and block elements, as well as page structure and how to create hyperlinks, reference external files and add images and video to a page.
One note that’s worth mentioning is that you don’t need a web hosting environment to begin learning. Just open up a text editor, such as Mac’s TextEdit or Window’s notepad and save that file as a .html file. (Make sure the program isn’t defaulting to RTF or rich-text format because you may be unknowingly adding extra information to your file) From there, you can test any of those files by opening them in your browser to preview them. No internet connection required!
There are some really cool text editors out there, many of which are free. I like BBEdit, which isn’t free, but TextWrangler and Sublime are free alternatives. (No affiliate marketing here, just good, pure recommendations) The beauty of a good text editor is that they’ll color the markup and provide a lot of tools that make your coding life easier.
When studying web design and HTML, I highly recommend you check out W3Schools.com. They have basic tutorials on everything, including lots of opportunities to test out the code they are teaching you about. It’s where I learned over a decade ago and where I still refer to often.
After you’ve got a general understanding of HTML, you can begin to make it look pretty with CSS. Cascading Style Sheets (CSS) is a method of applying styling rules to elements on a webpage. These rules can change everything: color, size, position, hover effects, fonts, background images, borders, spacing, etc. And with CSS3, the options are virtually limitless: you can rotate, change transparency, apply image filters, move stuff… and the list goes on.
W3Schools is awesome for CSS, but to admire the true beauty of it, I highly recommend learning from Chris Coyier and the crew over at CSS-Tricks.com, as well as checking out what can be created simply using CSS at the CSS Zen Garden.
With a firm foundation of HTML and CSS, you can create stunning websites that can wow the masses. So start here.
What next?
Only when you really understand HTML and CSS can you begin to appreciate and really make cool stuff with the other languages and tools out there. But when you need a next step, I encourage you to look into WordPress as a Content Management System (CMS). The power of a CMS is that it allows you to build a website including a back-end that makes it simple for clients to update content and not be handcuffed to the developer to make changes.
Personally, I chose WordPress for a number of reasons: it’s the most widely used CMS on the planet, it has an incredibly large user base with exceptional forum help and documentation — it’s so good I could cry. WordPress has consistently blown me away with the way that they provide top-notch products for free, thanks to the open-source nature of the platform. Leading minds in the industry are constantly at work, providing better and better products and improving security, speed and ease-of-use. I love you WordPress ❤.
Assuming you take my advice and begin using WordPress, then I also recommend that you look into the Genesis Framework and StudioPress Themes. The Genesis Framework, is fast, efficient, secure and provides developers incredible access (via hooks) to add content wherever they want on the page. I love it.
StudioPress makes elegant and professional themes based on the Genesis Framework that I use as starting-points for my website designs, allowing clients to get a preview of what their new site could look like, as well as save money because the site doesn’t need to be designed from scratch.
Now, I’m not advocating just being a theme-slacker, haphazardly slapping themes onto website and charging lots of money. There is no craft or art in that, and when I arrive at a site using a theme, but claiming to be designed by a professional, it’s embarrassing to the profession. Do it the right way. Learn to code child-themes and take pride in what you do.
From there, you’ll want to learn more about the language that your CMS is based on, which in the case of WordPress, Joomla and Drupal, is PHP. Once again, PHP can be learned using W3Schools. I’ve also found that the PHP Manual is extremely helpful as a resource for learning the syntax, variables and functions of the language.
If thinking about PHP makes your right brain shrivel up and want to die, then you may want to focus in on Javascript and jQuery, which, while using code, tends to lend itself to the creative side of the brain. jQuery and Javascript are both used to manipulate data, as well as control how things display on a page. They take your CSS skills and give them ninja powers.
Javascript and jQuery (which is really like Javascript’s cooler kid brother) both have excellent documentation and you’ll see it everywhere. From sliders to pop-ups, to replacing text, rearranging pages and interactive elements… it’s a lot of fun to learn about and work with. Of course, W3Schools has some great tutorials on using jQuery.
Some other awesome resources to help along the way are JSFiddle, which allows you to test out HTML, CSS and Javascript all in the same workspace, and the fine people over at StackOverflow, who for the most part just love helping people learn code and solve problems. There are the occasional few who like to exploit opportunities to puff up their own egos — but overall, it’s just awesome people helping awesome people.
When do I get to draw
You’ll notice that I haven’t said anything about design as we’d typically think about it. Maybe that’s because I’m a developer and own my own business, which means that I do it all. Design and development are merged in my brain — for better or worse.
I guess, as a whole, there is so much that can be done with regard to designing websites that doesn’t require a graphic design background. But honestly, we use Photoshop daily and your hands will be tied behind your back if you don’t have some knowledge of a graphics editor.
I really like working with Adobe Creative Suite. I know that there are many folks in the design world that are becoming dismayed with the products, especially since they are moving to a cloud-based model that requires monthly fees (not cool — I’m oldschool and like a one-time fee with a program that sits on my computer); but Photoshop and Illustrator have been essentials in the design community for so long, I think they deserve a little respect. An upcoming challenger in the design world is Affinity Designer which many are claiming to be Photoshop’s next, much cheaper ($49 one-time), successor. An even cheaper option is Pixelmator for $29.
These graphic design programs are mac-specific (except for Adobe) because… Mac is beautiful. It’s built for designers by designers. Mac products cost more, but if you’re using them for work, they pay for themselves over and over. And in regards to speed, power, simplicity and not mucking around with viruses and blue screens of death in Windows, there’s no substitute.
Now you’re a web designer!
Not really. But it feels nice to say that. And frankly, with a lot of good, ol’ fashioned hard work and elbow grease, I’m convinced that anyone can do this job. Some people, however, are allergic to hard work and others would much rather be working outside with their hands and not at a desk. Just because anyone can learn to do something, doesn’t mean they should. Find what you love to do and what you’re great at and you’ll love your life… and be able to pay the bills too.
I’ve only given you a few starting options in this article for those who want to learn to be a web designer, but those starting elements are crucial. Let me know what other tools I should add and what’s helpful… or what you disagree with. Thanks and go get ’em!
*Don’t use WordPress.com if you’re planning on being a web developer. WordPress.com is great for folks just starting out and need to get a simple blog up quickly. But for anyone wanting to build a prolific and self-managed website, the WordPress.org version is the way to go.
