Website Design Process

Website Design Process

First of all, what exactly is a ‘process’? A Web development process is a documented outline of the steps needed to be taken from start to finish in order to complete a typical Web design project. It divides and categorizes the work and then breaks these high-level sections into tasks and resources that can be used as a road map for each project.

The Process

Here is a standard process that was put together using examples.

  1. 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 you can possibly gather.
  • Determine required software and resources (stock photography, fonts, etc.)
    Beyond determining any third-party media needs, identify where we may need any additional software required. Add all of these to the project’s budget, charging the client where necessary.
  • Information Architecture
    Information Architecture is basically an outline and list of the pages needed in the site.
    1. Main Page
      • Rotating Testimonials
    2. About Us
      • Team Members
    3. Service
      • Service 1
        • Gallery
      • Service 2
        • Gallery
    4. Contact Us
      • Quote submission form
      • Google Map
  • Payment
  • After the information Architecture  and quote are approved by client. We ask for ½ down and last ½ upon completion of 3rd stage corrections.
  • Gain access to servers and build folder structure
    typical information to obtain and validate includes FTP host, username and password; control panel log-in information; database configuration; and any languages or frameworks currently installed. If we are provided hosting and domain this is the point we purchase those items.
  1. DESIGN

The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverable 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.

  • Mock-ups based on requirements analysis
    Designing mock-ups in Photoshop allows for relatively easy modification, it keeps the design elements organized in layers, and it primes you for slicing and coding when the time later on.
    Customized Templates:
    If we are using a customized template – we will send you templates that we think will work well with your business.
  • 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.

Customized Templates:
The client will pick a template.

  • Slice and code valid XHTML/CSS
    It’s coding time. Slice the final Photoshop mock-up, and write the HTML and CSS code for the basic design.

Customized Templates:
We will purchase and install template.

  • Client gathers all content
    At this time the client will need to hand-over ALL content. This site development will not start until all content is provided.
    • Content Example:
      • Information Architecture verbiage and images
      • Logo with transparent background
      • Username and Passwords or links to Social Media
  1. DEVELOPMENT

Development involves the bulk of the programming work, as well as loading content. 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.

Develop Process

The client will have 3 revision processes.

  1. The first round of revisions will be the most tedious. The client will go through the site page by page and email us and let us know what changes need to be made. The verbiage should have been approved previously. The changes will be more about placement and grammatical errors.
  2. The second revision will be making sure all errors got fixed correctly and possibly catching ones that were missed in the first review.
  3. The 3rd set of revision should be minimal at this point.

 

LAUNCH

The purpose of the launch phase is to prepare the website for public viewing. This requires testing of interactivity and features and, most of all, a consideration of the user experience.

  • Testing
    Run the website through the final diagnostics using the available tools: code validators, broken-link checkers, website health checks, spell-checker and the like.
  • Final cross-browser check (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry)
    Check the website in multiple browsers one last time and mobile versions.
  1. POST-LAUNCH

The client will have 30 days of maintenance to the site. For example if we missed a miss spelled word or issues with the site. Any new additions will be added for a fee discussed beforehand.

  • Hand off to client
    we will send you all username and passwords once the final payment is cleared.

As stated, this is merely a sample process. Your version will be modified according to your client base and style of designing. Processes can also differ based on the nature of the product; for example, e-commerce websites, Web applications and digital marketing all have unique requirements.

 

close
Facebook IconYouTube IconTwitter IconLinkedinLinkedinLinkedinLinkedinLinkedinLinkedinLinkedin