2 basic methods of Web Design and Development
There are many, many versions of the Web Design and Development Process, but they often follow 2 general patterns. They are Waterfall and Agile. There are variations on these, as well as others, however. See the links in Additional Resources.
Waterfall Process
- The Waterfall method is older, and is still used much today. It is more systematic and perhaps less prone to falling apart, but it is less adaptable during the design process. If there are lot of changes during the design process, it can be hard to turn the ship. Responsive Web Design has made this method more of a challenge, since you are designing for many devices and screen sizes at once. See Additional Resources for an article offering a revision to the typical Waterfall Process for RWD.
Note: Tasks are not necessary in exact order, and some tasks may even be done during different stages/phases.
Typical stages in the Waterfall design process
Research and Discovery can involve these tasks and more:
- Researching the target audience/user
- This and other tasks involves User Experience Design(UX) tasks such as user interviews, creating personas, etc. You practice these tasks in our UX classes. This is a rapidly evolving field(like all of this stuff), and you may hear these tasks referred to as Experience Design, or some variation.
- Researching the industry your client is in
- Develop goals for the product
- Develop and documenting the scope of the project
- Developing a budget for the project
- Assess existing content
- Developing a schedule for the project
- More UX tasks like Card Sorting, etc.
- and more tasks
Strategy and planning can involve these tasks and more:
- Create a Design Brief( I have left out a lot of the possible documentation that goes along with these tasks. A Design Brief would be an example of some of the documentation that may be involved)
- Determine technical specs, such as the need for database
- Information Architecture(IA)
- Organize the information in the site
- Developing the site structure(Sitemap)
- Developing the navigation structure
- Developing User Flows
- More about the process of using the product. How does a user move through the site or app? What routes may they take?
- Develop User Scenario or Journeys
- Wireframing(some might say this would be in the Design stage)
- and more tasks
Design can involve these tasks and more:
- Wireframing(some might say this would be in the Strategy/Planning stage)
- Develop the look and feel(visual design)
- Create a style guide
- A document specifying colors, fonts, design patterns, UI Modules etc. for a design
- It can change over time if the product evolves, and can be used well after the product is delivered to guide content providers and editors with a consistent guide to look and feel
- How To Create a Web Design Style Guide
- Create style tiles
- A Style Tile is a design deliverable consisting of fonts, colors and interface elements that communicates the evolution of a visual brand for the web. They can be helpful in reducing the number of comps to generate, because common patterns and design decisions are decided before doing a full mock-up/comp. Learn how to use them here.
- Create comps, mock-ups and/or prototypes of page types
- Comps are often done in Photoshop or Sketch
- Sketch has become very popular for creating comps/mock-ups and prototypes.
- Prototypes can be done in apps or services such as invision
- Test users using prototypes
- These can be low or high fidelity prototypes, such as paper prototypes, working interactive visual prototypes(such as in invision), etc, or even coded prototypes. This task can start very early, to catch potential problems.
- and more
Development or Production
- Generate visual assets
- Develop coded templates involving HTML, CSS, Javascript, etc.
- Develop a database(if applicable). This and other tasks could have started earlier. For example, the back-end work could start as soon as the need was determined, such as during the strategy or planning stages.
- Integrate a database(if applicable)
- This is back-end work(on the server)
- Populate pages either with static content, from a database, or a combination of the 2
- more user testing
Delivery Maintenance
- Hand off to a client
- Maintenance
- Determine who will maintain the site
- Train the client if applicable
Agile Process
- The Agile Process is a newer method of development. It involves what some might say is a less structured approach, allowing more room to to make changes.
- It is an iterative process where development is very rapid, often using working prototypes, with the product evolving throughout the process.
- It may involve "sprints", where a new version is developed based on necessary design changes that became evident during the last sprint. Changes are made, and then the product is evaluated again, and so on.
- The client is often more involved, with input on the results of the sprints, etc.