Observing A Web Design Procedure — Smashing Magazine

Nearly every internet designer could attest that much of the work is repetitive. We locate the tasks being completed by ourselves, even though changed, over and over for every internet project. Your work can be sped up by following a detailed website design and development procedure and help your customer understand your role. This report attempts to demonstrate how by developing a procedure for Web design, a developer’s thoughts can be organized, speed up the timeline of a project and prepare an independent business for growth.

To start with, what is a ‘procedure’? A Internet development procedure is a registered outline of the steps necessary to be taken from begin to complete in order to complete a typical Web design endeavor. It enhance and divides the work and breaks these high level sections into resources and tasks that may be utilized as a road map for each undertaking.

You Might Also Want to Have a Look at the next posts:

A Typical Procedure

Here is a typical procedure that has been put together using illustrations from around the net as well as my own expertise. (Notice: Please visit the resource links at the conclusion of each stage.)

1. Planning

The planning stage is potentially the most important, because what is determined and mapped here sets the stage for the project. Additionally, this is the stage that needs the corresponding attention to detail and customer interaction.

  • Prerequisites analysis This includes customer objectives, target audience, comprehensive feature requests and as much pertinent info as you can possibly collect. If his or her website has been planned by the customer, don’t be scared to offer tips from the experience.
  • Job charter The project charter (or equivalent record) sums up the info that’s been accumulated and agreed upon in the prior point. These records are not too specialized and generally concise, and they function as a benchmark throughout the project.
  • Website map A site map guides end users who are missing in the arrangement or have to find a bit of information quickly. Rather than simply record pages, including links along with a hierarchy of page organization is great practice.
  • Assets that define functions, copyright and financial points This is a crucial element of the documentation and should include payment terms, project closure clauses, termination clauses, copyright ownership and timelines. Take care to cover yourself on this document, but you should be concise and efficient.
  • Gain entry servers and also assemble folder arrangement Typical info to obtain and support includes FTP host, username and password management; control panel log-in info; database setup; and any languages or frameworks currently installed.
  • Determine necessary software and resources (stock photography, fonts, etc..) Beyond discovering any third-party media demands, identify where you may have to hire sub-contractors and some additional software you will personally need. Add these all into the project’s budget, charging the customer.

Resource links for this stage:

2. Design

The design stage involves shifting the information set out further. The main deliverables are a visual representation a registered site structure and, more importantly. Upon completion of the design stage, the web site should more or not have taken shape, but for the lack of features and the content.

  • Wireframe and layout elements intending This is the place where the visual layout of the website begins to take shape. Using information gathered by the customer in the planning phase, start designing the layout. Pencil and paper are helpful in this period, although programs are on the internet to aid.
  • Mock-ups according to demands analysis Designing mock-ups from Photoshop allows for relatively simple adjustment, it keeps the layout elements organized in layers, and it primes you for programming and cutting whenever the time in the future.
  • Inspection and acceptance cycle A practice of reviewing, tweaking and approving the mock-ups often occurs until (ideally) both customer and contractor are satisfied with the design. This is the easiest time to make changes, maybe not after the layout has been coded.
  • Slice and code legitimate XHTML/CSS It is coding time. Slice the Photoshop mock-up, also compose the HTML and CSS code to the simple layout. Components and jQuery come be sure to validate the code all before moving on, and For now, just get the artwork on screen.

Resource links for this stage:

3. Development

Development involves the majority of the programming work, as well as loading content (if from the team or the customer’s). Code commented and organized, and refer constantly to the planning details as shape is taken by the full website. Take a tactical approach, by testing as you proceed and avoid hassles.

  • Construct development framework. This is when special requirements might make you diverge in the procedure. Now’s the time to implement it and find the fundamental engine ready to go if you’re using Ruby on Rails, an ASP/PHP framework or a content management system. Doing this ancient guarantees that the machine can take care of the setup and.
  • Code templates for each page type. A website usually has many pages (e.g. home, overall articles, blog post, type) that may be based on templates. Making your own templates is great practice.
  • Develop and examine special features and interactivity. Here is where the elaborate elements become involved. I love to take care of this because the website offers a relatively clean and uncluttered workspace before adding the content that is static. Some developers prefer to get up validation and forms and running at this stage also.
  • Fill using content. Time to the boring part: loading all of the content given by the customer or writer. Even though dull, don’t misstep here, because even the simplest of pages demand careful and typography attention to detail.
  • Test and verify functionality and links. This really is a good time for a full website review. With your file manager as a direct, make sure everything and walk through every page you’ve made is in working order so you haven’t missed anything functionally or visually.

Resource links for this stage:

Smashing Membership. Just sayin’.

4. Establish

The goal of the launching stage is to prepare the web site for screening. This requires final polishing of profound testing of interactivity and features, layout elements and, first and foremost, a thought of the consumer experience. An important step in this stage is to move the web site, if need be, to its permanent Web server. Testing in the manufacturing environment is vital because different servers may have different features and unexpected behavior (e.g. distinct database host addresses).

  • Polishing Particularly if you’re not scrambling to satisfy the deadline, polishing a fundamentally completed layout can make a big difference. Here, you are able to identify parts. After all, as the customer is, you need to be as proud of this website.
  • Transfer to live server This could mean moving to a live Internet server (although hopefully you’ve been testing in the manufacturing environment), “unhiding” the website or removing the “Under construction” page. Your review of the live website happens. Be sure the customer knows about this stage, if the website is already popular, and also be sensitive to timing.
  • Testing Run the website through the last diagnostics using the available tools: code validators, broken-link checkers, website health checks, spell-checker and so on. You would like to get any errors yourself instead of hearing complaints from the customer or an end-user.
  • Final cross-browser assess (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry) Don’t forget to check the website in multiple browsers one final time. Just because code is legitimate, does not mean it’ll glow with a layout in IE 6.

Resource links for this stage:

5. Post-Launch

As you take care of all of the tasks associated with closing the 21, business re-enters the picture. Packaging source files, providing instructions for any training that is required and use happens at this time. Leave the customer as succinctly informed as you can, and try to predict. Don’t leave the project with a closed door; communicate you’re available for future upkeep and are committed to support that. Establish them, if maintenance charges have been shared.

  • Employed off to customer Be sure the customer is pleased with the product and that all contractual obligations are fulfilled (refer to the project charter). A project that is closed should depart both you and the customer met, without a bridges.
  • Supply documentation and source files Supply documentation to the website, such as a soft-copy site map and details on the framework and languages used. This will prevent any surprises to the client on, and it will also be useful should they ever work with another internet developer.
  • Job close, final documentation convince the customer to register on the last checks, give your contact info for assistance, and officially close the undertaking. Maintain a connection with the client checking in a month down the road to make sure everything is going smoothly is often valued.

This is a sample procedure, as stated. Your version will be modified based on your customer base and fashion of designing. Processes may also differ dependent on the nature of the merchandise; for e-commerce sites instance, Internet applications and marketing all have requirements that are unique.

Documenting The Procedure

Create and retain two variations of your internet design procedure: You for you or your staff to work with as a guide as you work on the rear end, and you to talk with clients. The gaps between both should be clear: yours would be much more comprehensive and include resources to aid with growth; the customer’s are a concise, non-technical map of the procedure from begin to finish.

For documenting the business process common tools are software such as Freemind, Microsoft Visio and a Microsoft Word document. If you’re ambitious, you could even develop your own tool that is internal.

Employing The Procedure

By now, you should know what a process looks like, including the details of each stage, and have some notion of how to construct your Web design procedure that is specific. This is an excellent first step, but it’s still merely a very first step! Don’t miss this next bit: to utilize it when coming and interacting with clients and the way understanding how a procedure can improve your total business.

Refining the Procedure

The procedure will be different for each designer, and for every undertaking. Develop a procedure for yourself, and identify anything is useful to your staff along with you. Only then will the procedure be truly useful. In the end, different target markets can be served drastically by freelancers.

Lists are good and well, but the procedure can be much more useful and complicated than that. Internet design blogs were submitted on by many of the resources, tools and links and Twitter feeds fit. An incredibly beneficial means to refine the procedure is to add resource links to each stage, and also to develop your own resources, such as branded document templates.

Some commonly used records of freelancers:

  • Invoice,
  • Project charter,
  • Documentation for hand-off for customer,
  • user accounts,
  • Database table graphs,
  • Website map.

Files and Archive

Documentation and storage are essential to grasp. They surely help when tax season rolls up or when a small freelance venture begins to expand as mundane since these tasks may be. When it comes to efficiency in time and work you may never be too disciplined. You can set a normal record format and folder structure or keep an inventory or archive of clients and project files. You could employ anything in simple lists to bookkeeping practices.

A Procedure Puts the Customer in Ease

Customers view Web development even after you’ve tried to instruct them. To these, they supply suggestions their needs and content, and there appears a website or begins to take shape. They are often oblivious of major elements such as the separation of development and design. Having an concise and organized procedure on hand will help arrange a customer’s thoughts and set their mind at ease, and of course help them know exactly where their money is going.

Outlining my fundamental procedure as a freelancer is definitely the most frequent first step I carry with potential or new clients. A quick, high-level “This is the way it works” discussion provides a framework for the whole project. As soon as you have this discussion, the customer will better knows what’s needed from these, what you’ll be delivering at certain points in the timeline and which kind of work you’re going to be participating in as you go along. Most of all, the discussion may nip any miscommunication or confusion in the bud.

Designers are too heavy to comprehend that people don’t have any idea what they know or are doing their terminology or know the steps. Starting new with a understandably “clueless” customer could be daunting.

It Is a Company

It is a business, and the steps outlined here are basically the road to small-business management. As you develop in clients or staff or contractors, you are going to find yourself with an ever-growing to-do list and a headache from all of the items to keep track of. Give yourself a break, and spend some time in finding tools that will help you to get the work. An process document is a first step on this path.


  • Ask a non-technical buddy to assess your process. It will make sense in case it makes sense for them.
  • Use the processes of different performers at a starting point to build or refine your own. See the resources links that are related.
  • Build document templates and Internet apps into your procedure. This will save time and make you more professional.


1 process can’t be applied to every undertaking. Make sure you review it before the discussion takes place to make sure it fits the undertaking, although your procedure will be useful when you engage a customer in the planning discussion.

Additional Resources

Here are a few links to resources that tools, as well as exhibit sample Internet design processes and templates to build integrate in your own procedure.

Have additional resources to share? Post them in the comments.

About The Author

Luke Reimer is a internet project director, designer, and developer currently operating Fluid Media website design team from Waterloo, Canada. …

Following A Internet Design Procedure