So You Want To Be A Web Designer: Part 1

I was asked to give an overview of some of the basics of web design for my cousin, and I had so much fun writing this little schpeal that I decided to share it with the blogging world. For those of you that are curious what it is I do for work, this is a little sneak peak at some of the things I've learned over the past year and a half doing web design. I hope you like it, and don't hit me if you don't! ;)

>> There are some basic things to know about how a website is made. I'll go into hosting and actually getting it seen on the internet at a later date. For now let's focus on the actual foundation of the site - the code. A website is made of these basic things:

• HTML coding (Hyper Text Markup Language) - I highly recommend reading up on what HTML actually does.
• CSS (Cascading Style Sheets) - This is what gives a website its layout, color, and text styling. It can do much, much more, but these are the basics. There are lots of considerations you have to make when using CSS. If you need help on a piece of code, feel free to ask and I will either answer or direct you to someone or some resource that has the answer.
• Images - While HTML and CSS are the backbone of a website, if you don't use any images in a website, you'll simply end up with blocks of color, perhaps some borders, and a jumble of different sized text. Images make a website come alive, and you can do just about ANYTHING by combining good coding and good-looking images. Use them for backgrounds, use them in animations, use them with logos, use them in your menus, use them in galleries, use them as accents in a paragraph. Go crazy, but not too crazy. There has to be balance, and when you have a few awesome images used in conjunction with good CSS and HTML, you've got a winner - someone might actually stay on your webpage long enough to read the intro paragraph. From there it's up to them...
• Pages - Just about every website on the internet is uses multiple pages containing HTML (e.g. a "Home" page, an "About Us" page, and a "Contact Us" page). You can have as many pages as you want, but keep in mind that you have to customize the code for each page and it can be tedious and risky to do so - more code means more mistakes. That's why many people (mostly advanced programmers) use Databases and PHP to create a template page that can switch out bits of code and refresh the page. I won't go into this now, it's pretty advanced for this discussion, but here is a resource that explains what PHP does.
• Hosting - For people to be able to view your website, you have to put it on a hosting server that is connected to the internet. This is essentially a hard drive that is constantly broadcasting a live feed of the files in a folder that contains your website. From there, when someone finds the address to the files (i.e. a URL), they can view your site in their browser. Voila! To do this, you are best off finding an online hosting company that will give you some instructions on how to host your site. You have to pay for these services and renew your agreement over time (you essentially rent space in their online apartment building) in order to keep your website viewable by the average Googling Joe. I will explain how to host your site in detail at a later date. For now, check out this site for useful definitions and this site for an overview of their hosting services.

Ok, so you know the basics on how a site is built. Now what about all that complexity I was talking about? Here's where the fun begins. There's a reason web designers get paid big bucks. They have to be programmers, designers, salesmen, managers, and other unpleasant jobs all at once in order to make a website that is clean, efficient, stable, and professional - and keep their demanding client in check but happy (Note: Clients often get antsy about when the site will be done and they will want to add a bunch of features that fly WAY out of their budget constraints. Learn to control that energy and get them excited about the work you're doing for them instead.).

>> Smashing Magazine. This website is an awesome resource for everything relating to web design. There are many more tutorials on here than I have listed, but just to point out some good ones that can get you started, here's a list of tips and tricks in modern web design:

>>> Use CSS (Cascading Style Sheets). The stuff here will show you the power of using style sheets in every website you make. The first covers simple layout techniques and provides templates and resources or getting started coding CSS right away. The second and third show you tips and tricks on what you can do with your div tags (div tags are style-able boxes used in just about every website made within the past 6 years or longer) to make your site look incredible. The fourth show even more tips and tricks. Try and combine these in every website project (Don't do EVERYTHING listed in EVERY project, but mix it up a bit and use multiple techniques on each project) to make your sites stand out.

• CSS Layouts
• Mastering CSS: Part 1
• Mastering CSS: Part 2
• CSS: Techniques, Tutorials, and Layouts

>>> Read books on web design. Smashing Magazine is printing their first comprehensive web design book next month, and you can get it for a discounted price (20% off) if you pre-order. I highly recommend this. Also look at stuff like "CSS for Dummies" and other such intro books, because if you study the basics, then augment it with the principles and tutorials taught in websites like Smashing Magazine (there are tons of others, this is just to get you started), you'll end up being able to make awesome sites that function correctly and efficiently across browsers (and trust me, that's super important!).

>> Also study how to work with the program you use to build your websites. If you're using a text editor, chances are you're going to have no hair by the end of the week. If you don't have or can't afford a program like Dreamweaver, there are other resources out there that can help you simply by color coding the HMTL and allowing you to preview the website. Just having a fancy program doesn't make it any easier if you don't know how to use the program.

I hope you learned a little about what it is I do on a daily basis, and for those of you that want to get into this stuff, I will be doing more of these turorial/discussions/lessons in the future. Either leave a comment or contact me if you want me to discuss something specifically. I'd love to help out by directing you to helpful resources and get you started on the right track!

Thanks for reading!

-Scott