Building a complete website from a basic idea

Navigation: Main page » Website Design

 Print this page Submit articleComment article

The Ultimate Facebook Marketing Guide
Hey there, Ever want to know how to get a lot more people interested in buying your products and services with Facebook? I know I have, but it’s never been easy to understand. Until now. Check this video out to see what I mean: Amy Porterfield is the co-author of “Facebook Marketing All in One For Dummies” and in this video she show you how simple it is to: •Get more fans interested in your products/services •Turn average fans into Super Fans •Make those Super Fans become customers for life •And a lot more... Watch this video to hear what all the rave is about for this training: You don’t want to miss out on learning how to maximize Facebook... take action now and watch this video:

Author: charlesalfred

In my 10 years experience of running a web development company there has been many instances where customers come to me with just a basic concept of what they want to develop. Sometimes they send me a project description that comprises of a mere 1-2 sentences to 100 page detailed documents with diagrams, references and so on. In both cases you are faced with either too little or too much information. It is not expected that your clients will be so knowledgeable as to define exactly what they want. Sometimes they only have an idea and sometimes it’s a bit more than that. Whatever is the case they look on you not just as web developers but also as an expert consultant who can guide them on what’s the right way to go.

You then are faced with the challenge to transform the basic idea to a full fledged online business that has the potential to succeed and challenge their competitors. Here is a list of strategies that ensure you can meet your customer’s expectation and transform their dream to reality.

1. Understand the concept and outline the basic sections and features ======================================================= You should first attempt to create a list of logical sections that the website should have. Ask the customer questions if you think you do not understand. If you already have experience in developing websites that relate to the concept you can suggest sections that should logically be present. At the end of this exercise you should create a document where all sections, sub-sections, pages are listed down in a logical order (maybe in a simple bulleted format) with a short description of each section detailing the main objective and purpose of the section. In technical terms you may call this the site map of the website. In addition to the sections the site map also shows how each section is linked to each other. Share this document with the client and if possible explain the document to him. Sometimes your thoughts are best explained when you talk to your client directly.

2. Convert your document to a wireframe diagram ======================================= There is a difference between creating a wireframe diagram and what I personally prefer. I basically design the website in powerpoint and show it to the customer. Personally I feel its much faster using powerpoint and I do not have to rely on my programmers to create the wireframe. In the powerpoint document we basically design each web page devoid of the colors and graphics but attempt to show dummy data, the placements of the data and how they appear, buttons, alerts, pop-ups and arrange the slides simulating the behavior of the website as a visitor would navigate the site. At this point the client can visually see his/her idea taking shape. From the document he/she understands how the website is going to look and how it is going to behave. To me personally this is the most crucial step and the more detailed you are in your preparation of your wireframe the easier and smoother the actual design and development process becomes. Once you have the whole site built, you can send it to your client for sign off, or send amendments to, your wire frame. This will help eliminate any misunderstandings about the way in which the pages and the site will function. It also gives you something tangible to show to the client that is relatively quick and easy to create. The more complex the site is, the more useful the wire frame becomes.

3. Building the design from the wireframe ================================= This becomes a relatively easier task if you know what needs to be designed. The designer decides on the color scheme, creates his style of layout and graphics. Sometimes the designer tweaks the arrangement of the sections to ones which are more visually appealing. Of course if the site is all about branding and showcasing then the design must be of top quality. Conforming to the latest Web 2.0 standards and clever design of UI sections with JQuery/AJAX pop-ups is also quite a challenging task. At the end of this stage all page designs are ready. Show it to your client for approval and verify that it conforms to the wireframe design and all sections/data has been covered.

4. Programming the website ======================= During programming ensure the following with utmost care and importance:- - The web page structure and coding should be very clean and validated. - Remove any unnecessary commented coding that you have done. - The page design should stay exactly the same after programming as it was before. - All security loopholes are plugged - The website loads fast and is compatible in most browsers It is advisable that a working version of the site is uploaded in a test server where the client can view the progress and comment. Remember that sites uploaded in a test server could also be crawled by google and indexed by search engines. So please ensure that the website is protected against that. To ensure privacy your website should be password protected during its entire development process.

5. Testing process =============== The importance of this phase is perhaps the most emphasized and the least practiced in the world of internet. Clients and developers alike miss this point in the urgency to finish the project and get it live. The testing process can be divided into 4 segments:- - Cross Browser Compatibility - Test your website to see if all design elements are in place in all popular browsers. There are plenty of online tools like www.browsershots.org which help you visualize your webpage in different browsers. To see how your website appears on the small screens of mobile phones like the BlackBerry or Windows Mobile, check out www.browsercam.com. - Test your website speed - Some people are still using slow connections and their population in not insignificant especially in the developing world. You therefore need to make sure that the average loading time of your HTML web pages, along with all the Javascript Ads, Images, CSS, Flash animations, etc., is within reasonable limits. http://tools.pingdom.com/fpt is a free online service that mimics the way a page is loaded in the web browser. It shows statistics (size, loading time) for every object on the web page so you know about the culprits who may slow down the website. Alternatively, you could use Firebug in Firefox to detect elements on your web page that are increasing the load time of your web pages. - Usability testing â€" You might wish to create a group of test users who will test the site in terms of ease of use and browsing experience. Carefully listen to their reviews and you might wish to incorporate some of their suggestions to your website. Alternatively you can contact websites that have an user base of testers who will do the test for you. http://www.usertesting.com/ is one such example. - Load, Stress and Performance Testing â€" If your website has the potential to be used by 1000s of users you have to load test your site to monitor how well it is performing. Particularly if you plan to show video or audio content you should check how well your website is handling streaming needs in peak demand. If needed you need to distribute your content in multiple servers for better performance. There are many tools that provide you with ways of testing web sites, web servers, and intranet applications with web interfaces. You may test and analyze the performance characteristics under various load conditions to find bottlenecks of your web applications.

6. Post Launch Support =================== Irrespective how well your web application has been planned, designed and tested you cannot ensure a 100% full proof site. There will be bugs, errors that cannot be foreseen unless a website is live and working with real users and live data. It is of the utmost importance that you have a developer or team ready who can handle any of such eventualities. If your site handles data which are accessed real time by its users then you must have a team on standby who can respond to emergency situations within 4-6 hours of reporting the problem. Customers should understand the importance of this and be prepared to have a budget allocated for this purpose.

In conclusion all these points can be elaborated, refined and added on. Infact there are endless variations and additions possible but this can serve as a basic guideline for both those who are in the business of developing and designing web applications as well as customers who wish to create a successful business online.

I welcome any comments and criticism on this document.

You are welcome to contact me at arindam.sen@acumensofttech.com for any consultation on web design, development and marketing of your requirements. I would be more than glad to help. Arindam Sen CEO Acumen Consultancy Services Pvt. Ltd.