Web Design Process

  • Usually the web initiative is driven by some business problems. It is critical to identify and understand the problem before we come up with solution and requirement. Very often web initiative is just part of the solution. It is important to understand the context and the scope of the project. It also helps us to set the achievable goals. We will use a small motel as example to see how design process may be managed.


    • Low occupancy rate.
    • Small customer base.


    • Using web to generate more leads.
    • Using web to make booking easier.
    • Using web to marketing to broader customer base.
  • Identify a small number, less than 5, of specific & measurable goals. Each goal needs to be specific and quantifiable. The goal should be directly related to your business and mission. The goal is not the requirement. The requirements is the broken down list of things that need to be accomplished to achieve the goal.

    • Establish online presence of the business.
    • Generate 5+ business leads per day through the web.
  • Requirement include features or tasks that need to be implemented to achieve the goal. It usually does not have much technical details at the moment. It will be furthur analyzed and prioritized in the design phase.

    • highlight our locations.
    • highlight affordability.
    • integrated to our online booking system.
    • mention nearby facilities.
    • integrated in google search.
    • integrated in google map.
    • integrated in tripadvisor.
  • We are getting to the point when we need to decide what pages we need and components in each page. But before that, we need to analyze all requirements and categorize them and prioritize them, since they are the driver for the design of pages.

    Due to the limited time for the final project, I propose we limit our design to thre pages. Landing page, service/product/project/case page, contact/about page.

    Map all or part of requirements to those pages and list them based on priority of each requirement. Putting too much in one page will distract user and dilute your message. It is up to you to decide what should be included and what should be left out and their relative importance. The relative importance will drive the decision of their placement on the page and other visual effect decisions later on.

    Show hotel location on a map.ContactHighLaning, Contact
  • This is where you design details for each page. Which component for which page. What should be included in each component. The placement of each comoponent. You can research similiar web pages to get ideas. You can list those pages you like for certain module of it by either take a screen shot or simple list the URLs.

    • Landing Page
      • Navigation Bar - it should have home, product/service, contact, design document.

      • Footer - it should have contact, copyrights.

Courtesy of: http://codepen.io/webdesign/pen/Bfolk