Designing a website may not seem like the easiest of tasks, but with the help of some new web building conveniences that have entered the market in the past few years it is possible to create a professional website for your business with only a small investment of your time and money. In fact, with the advent of greater choice in web design such as ready-made website templates, logos and other corporate necessities, you can build a website in three easy steps.

Step One: Plan Ahead

Before you delve into the world of web design and start looking for a suitable template, it’s important to plan ahead. You need to clearly define your company’s objectives beforehand so that the design selection process goes more quickly and you choose the right template.

For instance, who is your target audience? You must know your customer inside and out in order to choose the best site design for bringing in business. For instance, if most of your business comes from corporations and professionals you will need to choose a template that caters to that group of people - one that gives the right first impression and shows you are a serious business that can handle top-notch clients. In this case, a simple, efficient design will be your top preference. If, however, you are building an ecommerce website selling a range of goods, a template that can be customized for online shopping will probably be your design of choice. Perhaps you require a more “flashy” website? Flash templates are also an option and suit many different types of websites that rely on more than just text and a logo to make money.

Ensure that the template you eventually purchase is easy to customize and update. That’s the whole point of buying a template in the first place - to make both the building of the website and its maintenance stress-free, affordable and fast. You will need to add your own content to the template and work with the overall theme once it is downloaded. Also, most businesses will want to add fresh content, site updates, links etc. as time goes by so keep this in mind when searching for that perfect template. If you plan to incorporate interactive features into your site, such as forms and chat areas, the template you choose should be able to handle this as well.

Step Two: Choose a Template

Now that you are prepared, you can begin shopping for a website template that will work best for your business. Start by researching the many website template companies on the market that offer professional designs for reasonable prices ($20-$40). Most companies offer the choice between copyrighted and non-copyrighted material as well, so if you want to be the only one using the template design spend a little more money to receive exclusive usage. One such website template company I found that offers reasonably priced templates is http://templatedogma.com/. Once you purchase a copyrighted template it is taken off the market. If you don’t find a template that fits your business precisely, investigate which companies offer to design custom-made templates for your usage. This will cost more but prices are kept lower than hiring a designer and the results are just as good - if not better.

When you find the right template after reviewing the available designs, the rest is simple. All you have to do is purchase the template and download it to your hard drive in seconds.

Step Three: Customize

With the template all ready to go, all you have to do is add your own content, graphics, images - anything you need to make the site your own. If you can use a simple editor such as DreamWeaver or FrontPage, this can be done in a few days or less. If you are inexperienced when it comes to any aspect of web design you can hire someone to do the editing for you for a very small fee - much smaller than what you would pay a designer to create the whole site from scratch.

When adding content, if you only require a few simple words, consider writing the text yourself. If you need a lot more information, such as product descriptions, articles or sales content, consider hiring a writer to create unique, high-quality content. Because you saved so much money purchasing a ready-made website template, you can spend a little more hiring a great writer! If you write the material on your own, remember to keep it short. Keep paragraphs short and don’t bog the reader down with unnecessary information. People are in a hurry and don’t want to spend a lot of time reading pages and pages of writing. Let your visitors get the information they need so they can move on and buy your product or service, but also make sure the information you provide is actually helpful and written without grammar or spelling mistakes.

The overall design should be kept simple, but that doesn’t mean you can’t add graphics, pictures or even video. As long as you keep it uncomplicated visitors will not regret visiting your site and learning more about your business. Not everyone has high-speed Internet yet, so fast loading pages are still a consideration.

Other additions include tables, forms and quizzes. Tables specifically are an easy way to organize text on a web page and they load very quickly. Most HTML editors make it easy to generate tables on your website.

Website templates have brought web design out of its infancy and into the 21st century, catering to the unique needs of the online business owner, so don’t be afraid to take advantage of the convenience - you won’t regret the decision.

About the Author

This article was written by Katerina Mitrou sponsored by http://templatedogma.com/. Template Dogma offers a huge selection of professional, ready to use website templates and custom products too. Build your professional website in minutes with the help of Templatedogma.com. Reproductions of this article are encouraged but must include a link back to http://templatedogma.com/. -

Anyone can draw up a design in Photoshop. That doesn’t make them a web designer. I have worked with artists and graphic designers that can create some pretty cool looking “layouts” but the problem is they can’t be converted to a web design. You don’t just paste an image into an HTML page and call it a website… it has to be cut-up and laid out with lots of thought and care. Knowing the rules, limitations, and constraints of web design will dramatically effect what you draw up in an image editor.

Before you draw anything, you will need to figure out some things first:

1) What resolution do you want to develop to?
2) What layout do you want to use?
3) Will your content be static, dynamic, or mixture of both?

The first thing to figure out is what desktop resolution you are going to develop to. Based on information from http://browsersize.com/, all web user desktops worldwide can be broken up into these percentages:

1024 x 768 - 56%
800 x 600 - 22%
1280 x 1024 - 13%
1152 x 864 - 3%
other - 6%

When actually drawing a website design up in an image editor, don’t forget to subtract 30px from the width for your layouts.? This is to accommodate the scrollbar that will appear to the right when content exceeds the screen height.? Example: for a resolution of 800×600, your design should be 770px in width.

The main number you want to look at here is the width (the first number). Scrolling down is fairly well accepted as normal behavior for a website by all users. So the height is not as important as the width. Scrolling across is a different story. You will never want your design to have horizontal scrollbars at the bottom of the page. You will need to pay special attention to the width of your design when developing. If someone’s desktop resolution is smaller than the resolution you designed to, they will have scrollbars at the bottom of their page and this will be deemed to be an unpleasant “viewing experience” for that user. The lower the resolution of your design, the more people that can be included in those that will have a nicer “viewing experience”.

Before you just jump to the highest used resolutions (1024 x 768), consider your market. Who are you developing your website for? If your website is a forum about Java Web Development or CSS Web Design, then it’s probably safe to figure that most of your users will be tech savvy. That means they will probably have nicer/newer computers, which means that you could probably develop to 1024 x 768 without worrying about to many people having a bad “viewing experience”. On the other hand, if you are developing a website for a non-profit organization that provides free food and clothing to families with low incomes, you probably want to stick to 800×600. Your target audience probably can’t afford the latest computers and may more than likely have older computers that were given away to them or purchased at a very cheap price. Another example is older people with bad eyesight - if your website draws in lots of senior citizens, they will probably want to see things at a lower resolution to make text and images larger.

You might also want to consider whether or not you want to ignore a quarter your market’s “viewing experience”. If your website is for a company that markets to the general public, I doubt their marketing department will like this. They will more than likely want something that looks appealing to everyone. This can be done easily by designing to 800×600 desktops. In fact, sometimes it’s nice to have a background for your design. For those people who use higher resolutions, you can create more of an esthetically pleasing look to your design by having a background.

The second thing to figure out is what layout you want to use. A layout is how headers, footers, content, sidebars, etc. are placed on your page. Not every page has to have the same layout. For instance, you may want a unique layout just for your index (entry) page. That’s fine, as long as most of the other pages on your site are consistent in their layout.

There are all sorts of layouts you can go with. There are those with menus on the side, menus on the top, some with sidebars and side boxes, and some without. There are those whose width stretch to fill your screen (liquid) and those whose width is a set size (static). Lots of possibilities here. A good place to look at some example layout can be found at the Layout Gala: http://blog.html.it/layoutgala/. This site provides the code for some of the most popular base layouts used in web design. All these layouts use valid markup and CSS, and have been tested successfully on Internet Explorer/win 5.0, 5.5, 6 and beta 2 preview of version 7; Opera 8.5, Firefox 1.5 and Safari 2. A great starting point for your web design. Again, keep in mind the two types of basic layouts: static and liquid. If you use a liquid layout, you will still need to determine the minimal width. It should be equal to the width of the resolution you have decided to design to. Your content should “float” appropriately as the browser is resized - either to the left, right, or center until they overflow, at which point they should float downward, pushing all your content down. Once you have reached your minimal width you have designed your site for, you are no longer accountable for your users “viewing experience”. The content can overlap and run into each other… this now acceptable. You can try and force it to be static once it has reached its minimal width, at which point it will show horizontal scrollbars. This is sometimes deemed to be more pleasant than letting your content overlap itself. This is up to you.

Finally, you need to consider your content. Is it going to be fairly static? Will the content be updated by users frequently? Is there dynamic data that is used for content that comes from a database? Does the site use a content manager? The important thing here is to design to your content. In general, you should avoid designing static height pages… they should stretch appropriately to accommodate the data that is present on the page. This is one of the mistakes I see a lot of from graphic designers that don’t know anything about the web. They code a watermark background that looks cool for a page of an exact height of, say, 600px because that was how big the page was with its content. But then a month later someone goes in adds some more content -now the website has an 800px height, and there is 200px at the bottom of the page that doesn’t have a watermark and is even a completely different color/look than what was used for the first 600px. As a web designer you have to be aware of when to use “repeatable background images” or colors for backgrounds with dynamic data. Sometimes you can use static images or horizontal repeating images at the top or bottom, as long as they gracefully blend into the main background eventually.

This is also important for menus. Using a static image, like a tab, is fine as long as you are willing to go into an image editor and create a new tab every time you need to. However, you might consider using repeatable images/solid colors with text that automatically stretches when content is added. To do this is more complicated, but will save you time in the future. Plus, if you’re using a content management system, this will be mandatory. You will have no idea how long someone might make their menu link, so you will need to be prepared for links that wrap and/or stretch dynamically. Again, solid colors or repeatable background can be used here. The doodlekit website builder tool is an example of when you would want to consider this.? Advanced web designers that use this tool will need to consider these rules when developing. Some of the more complicated designs used by doodlekit have repeatable images/colors in the middle, and static images at the top and bottom, or on the left and right sides that blend into the middle.

Once you have figured out the resolution you want to design to, picked your layout, and determined how dynamic your content is, you are ready to finally start drawing! Keeping these in mind will determine how and what you design. When it comes time to convert it to an actual website, your web designer/developer will thank you!

About the Author

Heath Huffman is co-owner of doodlebit website designs & website solutions. They created the doodlekit website builder - an online tool that allows you to create and build your own website. doodlekit has the following built into it: page edit/creation, blogs, forums, photo albums, forms, shopping cart, file uploading, & website stat tracking.

Tags

Uncategorized