Web Design Process

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
    This includes client goals, target audience, detailed feature requests and as much relevant information as you can possibly gather. Being over loaded by content can, in most cases, be better than less information given. Even if the client has carefully planned his or her website, don’t be afraid to offer useful suggestions from your experience. The more that is known before the process starts, the better.
  • 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 not overly technical, and they serve as a reference throughout the project.
  • Site map
    A site map guides end users who are lost in the structure or need to find a piece of information quickly. Rather than simply listing pages, including links and a hierarchy of page organization is good practice.
  • 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. A contract is used to cover both parties and should be clear and consice.
  • 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.
  • Determine required resources (stock photography, fonts, etc.)
    Beyond determining any third-party media needs, at 9 Gears Media we will identify where you may need to hire sub-contractors and any additional software you may personally require. Do you have your own photos or will we be purchasing them for you? Add all of these to the project’s budget, charging the client where necessary.

austin, design, designer, web,

2. 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.

  • 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, we begin designing the layout using a wireframe. Pencil and paper are surprisingly helpful during this phase, although many tools are online to aid as well. In larger projects, 9 Gears Media will use Adobe Illustrator to create very clean wire frames to map out what the web site will resemble.
  • Mock-ups based on requirements analysis
    Designing mock-ups in Adobe Photoshop allows for relatively easy modification, it keeps the design elements organized in layers, and it primes us for slicing and coding when the time later on. At this stage colors and photos are added and the web site begins to take form.
  • 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. The contract will spell out when mock-ups are due as well as payments.

3. Development

Development involves the bulk of the programming work, as well as loading content (whether by our team or the client’s). It is wise to keep code organized and commented, and refer constantly to the planning details as the full website takes shape. At 9 Gears Media we take a strategic approach, and avoid future hassles by constantly testing as we go.

  • Develop and test special features and interactivity.
    Here’s where the fancy elements come into play. We like to take care of this before adding the static content because the website now provides a relatively clean and uncluttered workspace.
  • Fill with content.
    Time for the boring part: loading all of the content provided by the client or writer. Although mundane, 9 Gears Media know this is an important step, because even the simplest of pages demand tight typography and careful attention to detail.
  • Test and verify links and functionality.
    This is a good time for a full website review. Our Austin web designers go through every single page we have created—everything from the home page to the submission confirmation page—and make sure everything is in working order and that we haven’t missed anything visually or functionally.

4. Deploy

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).

  • 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. Your last-minute review of the live website happens now. It is time to place your web site on it's hosting server.
  • Testing
    This is where we run the website through the final diagnostics using the available tools: code validators, broken-link checkers, website health checks, spell-checker and the like. You want to find any mistakes yourself rather than hearing complaints from the client or an end-user.
  • Final cross-browser check (IE, Firefox, Chrome, Safari, Opera)
    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.

cat videos, austin,