You have come to the right place, rest assured, but you need to read here first.
Designing a website is almost the same as building a house. Certain thought processes and certain procedures need to be followed and adhered to if the site is to succeed. So let's take you through this step by step.
NB - although we are the web designers, we do not know what you like or dislike. Therefore you might like red but we might like green. Further to that the orange that you want will surely differ from the orange I choose which will surely differ from the orange Riaan chooses. So, having said that - we need certain guidelines from you to ensure we at least present you with a draft to your liking.
a) Decide beforehand what you like and what you dislike. How? By visiting other websites. You will know immediately what you like about them and what not. Write these elements down.
b) Be specific. Never assume that we will "guess" what you want. Treat us like you would a grade 1 school pupil. The more specific you describe what you want and where, the easier for us to make it happen, the happier you will be.
c) Take the time and read through this article as well - Design Tips
Step 1 - The Template
The template is similar to a house plan. A basic draft of what your site will look like to the visitor - but just an image. Not a working website, therefore no navigation buttons will work, no flash images, no colour changes, nothing - just a simple flat image. But the most important part of the whole process. How do we do this? We take the instructions you give us in the artwork sheet and we start building this bit by bit in either Photoshop or Paint Shop Pro. We basically put together a flat image containing all the elements you want put in.
See the sample template below :-
This is a template - it is basically a draft or plan of what the complete site will look like. Notice it is a flat image - you cannot click on any element and make it change colour or move or change page or nothing. This is what needs to be established first. What will the plan look like - same as building a house - you decide beforehand how many bedrooms, how many bathrooms, where the kitchen will be etc etc etc.
So let's look at some of the elements we need to know about.
1.1. The Banner :- This can either be a static image or can be a flash image - but we need to know beforehand. This is also the place where in 99% of the cases we will add your company name and logo. So, what images to use? You need to supply these along with your logo. Why? Because only you know what you like and dislike. If you tell us "put an image of a lion in", we might end up with a lion drinking water, but you had a lion busy hunting in mind. Be specific.
1.2. The Nav (Navigation) :- Very important - navs can be either left, right or at the top center. You need to tell us where to put it. We also need to know if you want sub menus and sub sub menus. These are all elements that you need to think about BEFORE we start building the template. It is important to tell us exactly what you would like these navs to do - should they change colour when hovering over them or enlarge or become underlined. Should they have a dropdown menu? Etc Etc. Keep in mind that if you want too many navs (more than 8) it is not practical to have them at the top - but rather off to the side - either left or right. Once again be specific. But think of the amount of pages that you bought. If you bought a 3 page website, no sense in having 9 navigation buttons.
1.3. The Background :- We would like to know if you want a patterned background, or a flat colour, or should the colour fade. If it should fade, is it fading from left to right, top to bottom or what? Do you want an image as a watermark? Be specific.
1.4. The Body :- What font would you like? Please see websafe fonts. What colour must that font be? What size? The same with the headings. Do you want one, 2 or 3 columns in your website? Why? What would you like displayed in each of these columns. What about the colours and background? How would you like your images to display? Research as much as you can, ensure you do the layout of the site on paper and then be specific.
1.5. The Footer :- Same as all of the above. What would you like to see in here? As standard, we add a link to our website - "web design by o5webdesign". We always make the text in the footer as obscure as possible. The footer completes the whole picture and wraps up the look and feel.
1.6. Other design elements :- Such as flash or a call to action, what would you like these buttons to look like? Where must we link them to? Where would they appear on the page/s.
1.7. Other elements :- Content. Think content. What do you want to appear on each page. Once again please be specific. Don't send us all the info and expect us to add. We need to know what must go on the home page, what must go on the contact page (full details) what must go where into which page. If you have a form, we need to know what the fields should be named. If you want a specific sequence in your site, we need to know about this sequence and what it should be. YOU must supply the content. Why? Because its your business, we simply would not know what to put there. We need the contact details from you, else we might end up putting our own contact details there.
Once we have all this, we can supply you with a draft of your template (first draft). This image will be uploaded onto our demo server where you will be able to view it. Now you need to tell us once again what you like about this and what you want changed. These changes will then be implemented and uploaded for your approval again.
Please note - we allow 3 major changes to this template. Not 3 different templates, but 3 major changes to the one template. Thus it is important that you do your homework before submitting our artwork sheet and giving specs for the project. This is similar to asking your architect to move the bathroom on your plans - he WILL charge you for everytime you move the bathroom as this is time related. We cannot make changes without having to have limitations on them. Therefore you need to PLAN before giving us your specs.
Why so strict? If we allow any amount of changes, we would still be sitting at step 1 with some websites. It is easy for the client to say, change the background colour to this or that, and once we present this, then change to that or this. This process can be repeated however many different shades of one colour there is. We really need to ensure that time is not wasted here. As such we need to work within strict guidelines.
Step 2 - Building the actual site
Once you have approved the template (or building plan), we can now start with the building of the actual site. Now, contrary to popular belief, this is NOT a cut and paste exercise. The image that was used in Step 1 is now taken and cut up into pieces. The html and css coding for the website is then written by hand (yes, we do not use pre-designed templates), and a complete html website is thus generated. Exactly like digging the foundations of a house and mixing the cement and using bricks and mortar to build what was decided on the plan.
Therefore, at this stage, if you decide to change the template, we will have to charge you another design fee, as the whole process is shifted back to the designer and we start from step 1. So please ensure you are truly happy with the template before signing it off.
Also, at this stage, to change something is not a simple process. Complete new html and css coding needs to be written for whatever needs to be changed.
Sample of html
<a href="wantawebsite.html"><img src="images/wantsite.png" border="0" /></a>
<p> <?php Menu($dev, 2); ?></p>
include_once "/home/o5webdes/public_html/poll/booth.php";echo $php_poll->poll_process(4);
Sample of CSS
Once we do the actual site, we will present you with a working website on our demo server. This will include all the pages and all the working elements such as navs etc. The only elements that might not be working on the demo server are flash, forms and RSS feeds.
At this stage, if you have asked for a database site or CMS, the database programming and/or CMS will be set up on the demo server and you will be given a username and password to login and start learning your program. It is very important that you actively participate in this as we need to know if something is not working or having glitches, so we can sort this out BEFORE going live.
Therefore we need you to test the website in its completeness. Keep in mind that when working so closely with a project, an oversight is very easy, and we might miss spelling or specific elements you requested, so ensure you keep reminding us.
Step 3 - SEO of the website
This is the part where you are happy with the end product and the project is nearing completion. We will ensure the server is setup correctly in order for us to upload the website onto the live web and furthermore we will ensure the SEO part is done (as this is our USP, I am sure you will understand if we don't expand on the subject here).
Your tracker will be added and a last check and test will be run to ensure the site works fine. Once all balances are settled and you give the go-ahead, it is time for...
Step 4 - You Have A Live Website!!
This is where we upload your site to the live web and start linking and ensuring that Google finds it. Important to remember - there might be glitches from the demo server to the live server, so suddenly you might find something not working. PLEASE DO NOT PANIC. There is a 2 week finetuning period in which all these glitches will be sorted, but once again we need you to test the live site.
Also note that it takes some time for Google to pick up your website, so please don't search for it immediately after we have uploaded it, it will not show in Google yet - please give them a week or 2 to actually find the site and update their results.
From here on, we need you to signup to our regular newsletter as this is the only way we have of communicating effectively with our broad client base.
As you can see, it all comes down to proper planning and forming an effective team between the client and o5.