Web Design ProcessWeb Design Process

Whether NiteOwl Studio builds your site or you choose another design fim, this process will help you understand the steps involved in website development.

Phase #1: Initial ConsultationPhase #1: Initial Consultation

During the initial consultation, I'll ask  a lot of questions (like the ones below)  to help create an outline and determine the basic project requirements and scope of work.

  • What kind of business or service you’re providing?
  • Do you have an existing web site? If so, list the pros & cons, if any and offer a URL (site link for review)?
  • Do you have existing text content to contribute to the project?
  • Do you have existing images, visual branding, or other imagery that is important to your purpose?
  • Have you made any existing style guidelines?
  • Do you have existing services such as an in-house IT dept., web host, dedicated email, website builder templates (not recommended), etc?
  • Have you purchased a domain name and do you have access to this account?
  • Are their other service/product/technology providers being utilized for this web project?

Offering as much information related to your web site during the initial consultation will help NiteOwl Studio, or any web designer, develop an accurate quote and create a strong framework as reference during the development phases of your site.

This part of the process is sometimes referred to as an RFP (request for proposal). This is where you outline your project's needs in as much detail as possible.

It may seem like a ton of work on your part, but these details will help establish a development timeline and let us realistically consider the puzzle pieces needed to complete your project.

Phase #2: StructurePhase #2: Structure

It's time for us to develop a wire frame.

A wire frame provides a basic structure that will help accommodate the general design, navigational interface and overall layout of your site

A wire frame can take many forms depending on your needs and the needs of the site.

Sometimes, its a simple sketch but other projects require greater detail and formality. This is especially true if your site has several "landing pages" and "rivers" of content information.

Keep in mind that a wire frame is just a rough blueprint, a model  that helps map your web presence.

Phase #3: TechnologyPhase #3: Technology

Website technology is based on the type of site you need.

A static design for your website will probably be limited to XHTML and CSS.

However, most websites these days are dynamic and leverage a database, CMS (Content Management System) and are a blend of various scripting languages like:

  • PHP
  • XHTML
  • Javascript
  • Actionscript, (Flash)
  • CSS
  • HTML5

A common term to describe a modern, dynamic site is LAMP (Linux, Apache, MySQL, PHP). LAMP simply refers to the interaction if a relational database (My SQL) on an Apache (Linux) server with the ability to communicate to the web through script (PHP). All of the popular CMS frameworks like WordPress, Drupal, Joomla, etc use this process. NiteOwl Studio has experience working with the design and development of LAMP sites. My preference is working with Drupal. The content management system is very intuitive for clients to understand and the development framework is extremly flexible to design and theme any site around.

The bottom line is that NiteOwl Studio can navigate these and other technologies to deliver the functionality you require.

Phase #4: Visual DesignPhase #4: Visual Design

 During this phase I begin drafting your website's design and layout. The design will be  viewable via a private, internal URL (also called a sandbox).

Although the site is technically "live", it exists outside your primary site address. Since the graphics and images of your web site will be the actual look, carefully review and provide any input or changes you need.

Design doesn't happen in a vacuum. Everything can be changed, so don't be afraid to offer input. The more involved you are, the easier is is for the designer. I also recommend including any key members of your company or organization for additional collaborative feedback.

Phase #5: DevelopmentPhase #5: Development

This phase is critical and involves the business logic and back-end functionality for your site.

Below are some of the things I can discuss with you:

  • Membership Login
  • Newsletter and emailing capabilities
  • Database retrieval/editing/removal (PHP,MySQL)
  • Content management solutions (Drupal)
  • Upload functionality for site visitors (logged in or not)
  • Dynamic retrieval and storage of media file formats including Video, Flash, Images, Audio.
  • Customizing user experience.
  • jQuery, HTML5, Flash,Mobile Devices--dynamic and intelligent programming for your needs.

There are various  functions that can be applied to your website and different programming languages to choose from meet your specific needs.

I will ask about these requirements during the initial consultation of your website project.

Phase #6: TestingPhase #6: Testing

Everything looks good on paper; but we are not done yet!

Now that we've worked through the previous phases and have a site up and running, it's time to put everything to the test.

Your website's code must be checked for broken links, technology functionality, and programming vulnerabilities.

After all these steps are completed, we are then ready to prepare the launch date.

Phase #7: LaunchPhase #7: Launch

This is where all the hard work, time, and careful planning go into effect.

Planning a web site launch date to coincide with advertising campaigns, grand openings, media releases, and other significant dates is crucial.

You should mention any deadlines for the site during your initial web site consultation to insure the timeline can be met.

If needed, you will also want to prepare a maintenance & backup plan to ensure your needs will be accommodated after the web site launch.

If all this information seems overwhelming, don't be. Most of the web site phases above are handled by me behind the scenes, however having a strong concept of what you need before beginning the project allows better communication and smooth work flow for everyone involved.