Saturday, March 3, 2012

Advice on Learning Web Design

I am often asked how I learned to be a web designer.
First of all, I usually laugh at that question because I am not a designer. :)
I'm a self-taught affiliate marketer who has learned enough about coding and software to build a decent website.

Why Bother Learning Design When There's WordPress?

Now that WordPress is so popular, many people forgo any kind of web design training because it's just not as necessary as it once was.
You just pick a theme and BOOM, you've got a website!
However, WordPress themes are driven by CSS and understanding how it works will help you greatly when it comes to manipulating your existing theme.
I use CSS a lot to float and position elements on my pages so having a basic understanding has helped me a lot. I don't agree with the "rely on WordPress" philosophy that many go by today.
Someone on YouTube once told me my advice about CSS was "old school" because of WordPress. I completely disagree. As long as tools like WordPress, Joomla, etc. are driven by CSS for the design, it will always be relevant.
Most people eventually discover that if they want full control over their site's design and theme, they have to learn some of the fundamentals.
The headers on this site and my blog are completely driven by CSS code that I wrote. I like to position elements where I need them to go, so that's one lesson I often rely upon even though I do use WordPress for my blog.
WordPress was not around when I created this site, so I was forced to learn more about coding. I'm actually glad it happened that way.
Having said that, here are the resources I recommend if you're interested in learning more about web design...

W3Schools

I used to be hesitant about recommending this website because their presentation was a bit too technical for the average newbie.
However, they've revamped their site a lot and it's a lot friendlier now. This is definitely the place to go if you're a "learn the fundamentals" type of person.

HTMLDog.com

This is another great fundamentals website. It's a bit more friendly than W3Schools and the organization is better in my opinion.

Lynda.com

This is where I learned a lot about Dreamweaver, which is the software I use to manage this website. If you are one who loves to learn by video, then this is the site for you.
Lynda.com has tutorials for almost every web-related software you can think of. And what's great is they are always up to date in spite of the ever-changing technology world we live in.
There's a membership fee, but anyone who has used them will tell you that it's well worth it.

Artisteer

If you're the kind of person who just wants to generate a quick design on the fly for your website, and you don't necessarily care about learning code, this is your tool. It works with WordPress, Blogger, static sites like this and even Joomla.
A lot of designers actually use this software for inspiration and to help generate ideas for their clients. It's a pretty neat tool. Watch my video review on Artisteer.

Dreamweaver

As mentioned, this is the software I used to create this site. Dreamweaver is for static HTML/CSS websites like this. Even though you could use it to develop a blog theme, it's not typically used for blogs.
DW has built-in templates but they are very simple and bare. They are nothing like you'll get with Artisteer or WordPress. For example, this original template I'm using now was comprised of two white columns with a empty header, footer and no images. It was completely bare with the exception of filler text.
Thanks to my knowledge of CSS and using Dreamweaver, I was able to jazz it up to what you see now.
There is definitely a learning curve with Dreamweaver and many will say it is not for beginners. It also assumes you plan to learn CSS. I absolutely love DW, but understand it is not for everyone.
Watch my video tutorial that shows you how to setup a Dreamweaver template.

Study Existing Sites - The Way I Learned

Quite honestly, I learned a lot of what I know by either viewing the source code (right-click mouse and select view source) of other sites or downloading free templates and editing them.
The advantage of this method is it's an easier way to learn. The disadvantage is you don't necessarily learn all the fundamentals... at least not in the right order. This can cause problems when it comes to troubleshooting your design.
Nevertheless, this is how I learned. I spent many days downloading free templates from CSSTemplates.org and editing away until I learned how to make the templates do what I want.

No comments:

Post a Comment