I’ve been Designing Web Sites for about nine years now. In that time, I’ve made just about every mistake known to man, but I learned more than I ever could have reading some book or taking a class. I’ve gone from a Front Page rookie to a wily PHP designer and hit every bump in between. I’ve tried ASP, ASP.Net, PHP, HTML, XHTML, CSS, CGI, java script, action script, and just about every language you can think of. And, over time, I’ve developed a simple method for creating stunning web site designs faster, easier, and more fun that most people could imagine. Now, I feel obligated to share with you the method I wished I’d had when I first started out those nine long years ago.

How NOT to Think About Web Design

It’s important to always start off with the right kind of mind set when taking on any project and designing web sites is no different. One of the biggest road-blocks I encountered on my journey is my own fear of “getting dirty” with the code. For the first four years, I was purely a Front Page guy… never daring to venture into the code unless I absolutely had to It wasn’t until I became absolutely frustrated with the limited nature of the software that I slowly inched my way into learning some HTML.

And, let me tell you… from the very first day, I’ve wished I would have been braver sooner. Learning code is easy, because it’s so logical. Most programming languages, especially today, operate off simple common sense and logic. And, once you begin to learn some code, you realize how much more you can do knowing just a tiny bit of code.

So, my first piece of advice is to NOT do what I did. Don’t spend years frustrated by a software program that will never give you the control you’re looking for. If you’re serious about being a web designer or designing truly professional web sites, learn the web design course online. It’s simple, it’s easy, and even a basic knowledge of a couple programming languages allows you to do much more than you ever could with any software program.

Now onto the cheat sheet…

Step #1: The Pre-Step

If you’re like me, your first instinct when you come up with a new idea is to immediately rush to the computer and start working. Not so fast, my friend. One of simplest and most effective steps you can take to make your life less stressful is to take a moment and simply draw out the layout of the design you see on a piece of paper.

It might sound stupid and frivolous, but it makes such a huge difference. It’s as if the mind suddenly focuses once you put your idea on paper. By putting it on paper, you define exactly what elements you want to have on each page, what the overall look and feel should be, and you give your mind a specific and focused direction in which to aim.

No matter how silly it may or may not seem, draw out your design first!

Step #2: Lay Out Your Files

If you’re using current web design standards (and you should be) then every site you build will have a similar set of core files: 1) header.php, 2) footer.php, 3) sidebar.php, 4) style.css and 5) your individual content pages (i.e. index, about, contact us, etc.). Go ahead and create these files right off the bat. You know you need them, so just create them, and include them in a index.php file (Note: if you’re not sure what I’m talking about here or how to do it, see the resource box below).

This gets the core functionality of your site out of the way, that way you can focus on designing and you can test your site live to see how it looks.

Step #3: Build Your Page Layouts

Here’s where you’ll need to decide exactly what elements the pages of your site will have and where they will go (we’re not worried about what they look like, yet). What will your header look like? Will it have multiple columns or just one? Will you have a navigation bar at the top or in the sidebar? Will you have a sidebar? What about your footer? Where will it go? What kind of elements will it have?

This is where you lay out the basic structure of your site – kind of like building the walls of a house. You’re not painting and hanging up pictures, yet – instead, you’re making the blueprint that determines how it all comes together. Lay all this out first.

Step #4: Conduct Basic CSS Styling

Now, that you’ve got your “walls” up, it’s time to start to add some insulation and drywall and see how it all looks. In other words, you’ll want to do some very basic styling. Get your divs lined up how you want – the right heights and widths, their basic layout and shape.

A little trick I use is to make all my main divs (which should usually be header, content, sidebar, and footer) a different color, so I know which div is which when I look at it in a browser and I can see if everything is lining up how I want it to. In fact, I’ll leave these colors applied throughout most of my design work, so I can see how everything is coming together.

Step #5: Build Your Design Elements

This is where you’ll spend the majority of your time – and, you’ll spend it in Photoshop (or whatever graphics program you use). This is where you create your background images, logo, bars, headers, and so on. This is where most of the creative work actually takes place.

Build your design elements, test them, and get them exactly how you want them. Don’t move on from here until you’ve got it exactly how you want it. And, of course, you may decide to outsource this portion of your designing, but, at least if you do, you have a much more clear idea of what kind of elements you’ll need – which can save you time, money, and frustration.

Step #6: Check Browser Compatibility

I test my designs in Firefox as I build them, so inevitably I have check to see how Internet Explorer renders my site. At this point, you want to stop and do this for the major design elements you’ve built so far. There’s nothing more frustrating than building an entire site only to find out it causes Internet Explorer to have a heart attack.

It might seem tedious, but trust me… stop here and check. You have a lot less code to work through and if you handle the major issues now, it typically works out to be less work you have to do later.

The post 6 Tips to Make Designing Websites Faster, Easier, and More Fun appeared first on skorpil photography.