My Web Design Cheat Sheets - 9 Tips to Make Designing Websites Faster, easier and more fun

I design websites for about nine years. At that time, I did almost all errors known to man, but I learned more than I ever have read a good book or take a class. I went from a rookie Front Page designer for a crafty PHP and hit every bump in the middle. I tried ASP, ASP.Net, PHP, HTML, XHTML, CSS, CGI, Java Script, Action Script, and almost every language you can think of. And, in time, I developed a simple method to create stunning web site designs fun faster, easier, and more than most people realize. Now, I feel compelled to share with you the method I wish I had had when I started those nine long years ago.

How not to think about Web Design

It 's important to always start off with the right kind of mindset to take on any project and the website design is no different. One of the biggest roadblocks that I encountered in my travels is my fear of "dirty" with the code. For the first four years, was merely a boy ... Front Page never dare to venture into the code unless I absolutely had not been up to become quite frustrated with the limited nature of the software that slowly inched my way to learn HTML.

And let me tell you ... from the first day, I wish they would have been more brave before. Learning the code is easy, because it is so logical. Many programming languages, especially today, operate in a simple common sense and logic. And, once you start to learn a bit 'of code, you realize how much more can be done just by knowing a little' code.

So, my first advice is to do what I did. Do not spend years frustrated by software that will not give you the control you are looking for. If you are serious about being a web designer or web design highly professional, learn the code. It 's simple, easy, and even a basic knowledge of programming languages ​​a couple allows you to do much more than you would with any software program.

Now the package ...

Step # 1: The Pre-Step

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

It may seem silly and frivolous, but it makes a huge difference. And 'as if the mind is concentrated suddenly once you put your idea on paper. Putting on paper, you can define exactly which elements you want to have on each page, what the look and feel should be, and give your mind a specific direction and focused aim for.

No matter how silly it can or can not seem to draw your first picture!

Step # 2: Lay Out File

If you are using current web design standards (and you should be), then all sites will have to build a similar set of core files: 1) header.php footer.php, 2), 3), 4) sidebar. php style. css and 5) the individual pages of content index (ie, about, contact, etc..) Vai ahead and create these files right off the bat. You know you need it, so just create them and put them in a file index.php (Note: If you are not sure what I'm talking about here, or how, see the resource box below).

This allows you to get the basic functionality of your site in the middle, so you can focus on design and you can test your site to see how it looks.

Step # 3: Create your own page layout

Here is where you decide exactly which elements of your site pages will go and where (we are not concerned about what they seem, yet). What will be your header look like? Will have more columns or just one? You will have a navigation bar at the top or sidebar? You will have a sidebar? And your footer? Where to go? What kind of items will?

Here you can define the basic structure of the site - a little 'how to build the walls of a house. You are not painting and hanging pictures, but - instead, you're doing the project that determines how it all together. Having all this first.

Step # 4: Conduct basic CSS Styling

Now that you have your "walls" up, it's time to start adding some 'insulation and drywall and see how everything looks. In other words, you'll want to do some 'style is very essential. Get your div aligned as you want - the right heights and widths, their basic layout and form.

A little trick I use is to make all my main div (which should usually be the header, content, sidebar, and footer) of a different color, so you know what I-div is that when I look in a browser and see if everything goes the way I want. In fact, I leave these colors applied to most of my design work, so I can see how everything is coming together.

Step # 5: Build Your Design Elements

This is where you spend most of the time - and spend it in Photoshop (or any other graphics program you use). Here you can create background images, logos, bars, headers, and so on. This is where most creative work is done effectively.

Build your own design elements, test them and make them exactly how you want them. Do not move from here until you understand exactly how you want. And, of course, you may decide to entrust this part of your design, but at least if you do, you have a much better idea of ​​what kind of items they need - it saves time, money and frustration.

Step # 6: Check Browser Compatibility

I test my designs in Firefox as I build them, so inevitably I see how Internet Explorer renders my site. At this point, you want to stop and do this for the most important design elements that you have built so far. There's nothing more frustrating than building a whole site only to discover that causes Internet Explorer to have a heart attack.

It may seem boring, but trust me ... stop there and check. You have a lot less code to work through and if you handle the big issues today, it works out to be generally less work you need to do next.

Step # 7: Integrate Web technology

Now, the main design elements you down, you have your site for the most part in his place, and it's time to add their main technological elements. It 's important to do it now, before you do more CSS style, so you can see that the technology will be integrated into your site. If you are building a Wordpress theme (you can do this by following the same method) the point where we must integrate the Wordpress PHP code into your design.

Step # 8: Advanced CSS Styling

At this point, you should have your site built largely structurally ... Now, you can begin to finalize your CSS. Another thing to keep in mind is that this phase does not end really. I'm always tweaking my sites here and there. Much is possible with CSS style elements is very special and make them exactly as you like.

Step # 9: Validation

Oh yeah ... validation. For some people, this may be optional, but, for me, it is not. Building a site that validation is a sign of a professional web designer. Not to mention, it is rumored that Google pays attention to this. It's really not that hard to do and usually takes me half an hour to an hour to put out. It's worth the time in terms of reputation, credibility and positioning in search engines.

Wrapping It All Up

Well, this is my cheat sheet and the exact method I use to design web sites. It took me about five years to get down to a science like this, but it was worth at the end. Of course, we are not able to cover a topic in too much detail here, so if you want to learn more about web design, be sure to check my box of income below....