Web Design Process

Web Design Process

Planning

The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.

  • Requirements analysis
    This includes client goals, target audience, detailed feature requests and as much relevant information as I can possibly gather.
  • Project charter
    The project charter (or equivalent document) sums up the information that has been gathered and agreed upon in the previous point. These documents are typically concise and they serve as a reference throughout the project.
  • Contracts that define roles, 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.

Design

The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverables are a documented site structure and, more importantly, a visual representation. Upon completion of the design phase, the website should more or less have taken shape, but for the absence of the content and special features.web design process

  • Wireframe and design elements planning
    This is where the visual layout of the website begins to take shape. Using information gathered from the client in the planning phase, I will begin designing the layout.
  • Mock-ups based on requirements analysis
    Designing mock-ups in Photoshop allows for relatively easy modification. This is where we can come up with the exact style that we want before all programming is done.
  • Review and approval cycle
    A cycle of reviewing, tweaking and approving the mock-ups often takes place until (ideally) both client and contractor are satisfied with the design. This is the easiest time to make changes, not after the design has been coded.

Development

Website Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s). Keep code organized and commented, and refer constantly to the planning details as the full website takes shape. Take a strategic approach, and avoid future hassles by constantly testing as you go.

  • A website usually has several pages (e.g. home, general content, blog post, form) that can be based on templates. Creating your own templates for this purpose is good practice.
  • Develop and test special features and interactivity.
    Here’s where the fancy elements come into play. I like to take care of this before adding the content because the website now provides a relatively clean and uncluttered workspace.

Launch & Feedback

The purpose of the launch phase is to prepare the website for public viewing. This requires final polishing of design elements, deep testing of interactivity and features and, most of all, a consideration of the user experience. An important early step in this phase is to move the website, if need be, to its permanent Web server. Testing in the production environment is important because different servers can have different features and unexpected behavior (e.g. different database host addresses).

  • Polishing
    Polishing a basically completed design can make a big difference. Here, I can identify parts of the website that could be improved in small ways. After all, I want to be as proud of this website as the client.
  • Transfer to live server
    This could mean transferring to a live Web server (although hopefully you’ve been testing in the production environment), “unhiding” the website or removing the “Under construction” page. Last-minute review of the live website happens now.
  • Testing
    We will run the website through the final diagnostics using the available tools: code validators, broken-link checkers, website health checks, and spell-checker. I want to find any mistakes that could be seen by the client or end user.
  • Final cross-browser check (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry)
    Don’t forget to check the website in multiple browsers one last time. Just because code is valid, doesn’t mean it will sparkle with a crisp layout in IE 6.

Development

Business re-enters the picture at this point as you take care of all the little tasks related to closing the project. Packaging source files, providing instructions for use and any required training occurs at this time. I will always leave the client as informed as possible. I will establish a relationship and communicate that I am available for future maintenance and are committed to ongoing support. Maintenance charges are extra. We can figure this out when the time comes.

If you are ready to have a great website Click Here!