My Web Design Cheat Sheet – 9 Tips to Make Designing Websites Faster, Easier, and More Fun

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 mindset 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 more brave 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 code. 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.

Step #7: Integrate Web Technology

Now, you’ve got your major design elements down, you have your site mostly in place, and it’s time to add in your major technology elements. It’s important to do this now before you do anymore CSS styling, so you can see how that technology will integrate into your site. If you’re building a WordPress Theme (which you can do following this same method) this the point when you would integrate the WordPress PHP code into your design.

Step #8: Advanced CSS Styling

At this point, you should have your site mostly built structurally… now, you can begin to finalize your CSS styling. Another thing to keep in mind is that this stage never really ends. I’m always tweaking my sites here and there. The great part is with CSS you can style elements very specifically and get them exactly how you like them.

Step #9: Validation

Oh yeah… validation. For some people, this might be optional, but, for me, it’s not. Building a site that validates is the sign of a professional web designer. Not to mention, it’s rumored that Google pays attention to this. It’s really not that hard to do and, typically, on takes me a half an hour to hour to knock out. It’s well worth the time in terms of reputation, credibility, and search engine rankings.

Wrapping It All Up

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

Five Important Web Design Secrets

If you want a truly awesome website there are some web design secrets that you need to know. These secrets are important. Using them creates a website that brings you lots of relevant traffic. Not using creates a website that is sluggish and boring.

While there are a good number of things to keep in mind when creating a web page, and a lot of good advice for designing the perfect web page for your site, the following five web design secrets can help you to get a great start in creating an easy-to-use site that will rank high on the search lists.

Secret #1: Your Titles Need to Make Sense

This may sound silly (of course your titles should make sense!) but so many website owners are as concerned with packing in as many keywords as possible that they fail to take good grammar into account. With that in mind, make sure that the titles and sub-titles on your pages make sense grammatically – and logically too of course.

Secret #2: Don’t Use Page Counters

As cool as it may seem to have your website “count” incoming visitors, with today’s technological advances any web host with any credibility already has ways to let you know precisely how many visitors you have. A counter only makes you look like an amateur. This is especially true if those who visit your site have sites or blogs of their own and therefore know that you don’t really need the counter. In addition, page counters can actually cause problems with your design, especially if you have to cut and paste them or if they come with attached codes from other web sites that are looking to attract more traffic to their own site.

Secret #3: Do Not Try Any Underhanded Tricks to Fool Search Engines

As cleaver as some of these tricks for generating traffic to your site may seem, don’t use them! Many of the tricks you see advertised by “successful” webmasters (like putting tons of key words on the pages in invisible text or using non-organic back links) may have had limited success in the past, but the search engines are very savvy. This is especially true of Google. Try using any of these or a dozen other tricks on Google and you might as well kiss your web site goodbye.

Secret #4: Don’t Put Background Music on Your Webpage

Yes, it is understandable that you might want to set the mood for your website, and in some cases it can actually add to the flavor of the website. But in most cases it is inadvisable first because it is annoying to the user (especially if they are viewing the page in a work setting) and secondly, because music files can take up a great deal of space, causing your page to take longer to load. And if browsers have to wait too long for the page to load, chances are that they will go someone else.

Secret #5: Try Not to Use Frame Sets

Yes, HTML is difficult to arrange (layout wise) but today CSS positioning is much easier and is well supported by most of the major browsers, which makes frame sets obsolete in most cases. In fact, there are other reasons to avoid frame sets as well. These include the difficulty most beginners have in putting them together properly as well as their tendency to make the website more complicated than necessary as well as the difficulties they can cause the search engines that are crawling your site.

Putting it All Together

While these are not the only bits of advice that you can use to make your website manageable, they can help you in getting a jump-start on creating a website using website templates that will generate the most legitimate web traffic available and bring you far more business than you ever dreamed possible.

Of course, if you really want to take advantage of professional techniques, you can hire a professional web designer who can use all the web design secrets to help you to create an SEO optimized website that will truly represent you.

Web Design Tricks in Inexpensive Web Design Services

The dream of each entrepreneur starting a web-based business is to get affordable web design services. With affordable web design services, you would be capable to get the most effective designs at the lowest worth possible. The mix of these two components decide the success of an enterprise online. Of the huge number of web design firms, there are some that provide the good high quality at the worth a mean web marketer would be capable to afford.

Methods are involved in designing websites. The tips are supposed to get extra out of a website. The extent of internet design tips determines the full cost of operating a web site and the web business. Right here we shall discuss web design tricks that make net design services inexpensive:

1. Search engine friendliness – A web design trick is making the web site being search engine friendly. Which means that the web site have structures that help the location to be easily crawled and listed by the search engines. This may then make the positioning to simply appear in search engine results. Therefore it is extremely essential that you think about an online design company that has specialists in search engine optimization for websites. Search engine pleasant features are good URL construction, sitemap, RSS, characteristic, image kind, etc.

Not all web design companies are serch engine oriented. There are many good net design companies that will create good websites for you with good designs at low cost costs however with poor search engine features. In this case, the service of the net design firm is not inexpensive because you are paying for it that lapse by way of lack of revenue that might have been made via search engine traffic.

2. Easy replace – An online design trick is that the website needs to be simple to update. An affordable internet design service is one with an internet site that you would be able to simply replace yourself. It mustn’t require special skill to do. Net design companies turn expensive in the event you would all the time should get in touch with the net design company before you possibly can edit articles, change pictures, add movies, change navigation structure, etc. All these value extra money.

3. Customization – One of many net design methods that give affordable web design services is being able to customize the web site to swimsuit the needs of the client. An web business promoting fashion products ought to have designs that the shopper can simply incorporate to mirror the season. Throughout Christmas season, the shopper ought to have the ability to use the customization options so as to add designs exhibiting the Christmas trees, enjoying Christmas songs, etc. All these have impact on the web site visitors. Guests feel comfortable when the website they visit show designs that replicate the season and the product they’re interested in. This increases sales. There are websites for children. As an illustration, an internet site promoting youngsters video and laptop games must be personalized to include intro video games that may be performed online. The power to customise an internet site have a psychological effect on the shopping for behavior of internet users. An online design will flip inexpensive if that is in place.

Reasonably priced internet design services are usually not solely in terms of price. What determines affordable web design services is the experience of the shopper after the website has been designed. A website designed at a very low value could later prove very pricey for what you are promoting if it doesn’t have mandatory options that would enhance your on-line sales. Hence, among the web design tricks menioned above have lots to do with whether or not you bought an inexpensive web design service.