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, and many real-world projects use a combination of methods. See the links in Additional Resources.
Both methods can involve these general stages or activities:
Research → Strategy → Design → Development → Testing/QA → Delivery/Maintenance
In Waterfall, these tend to happen more sequentially, while in Agile they may overlap and repeat throughout the project.
Waterfall Process
- The Waterfall method is older, and is still used today. It is more systematic, with major stages generally completed before moving on to the next stage. This can make a project easier to organize and document, but it can also make significant changes later in the project more difficult. Modern web projects often use some iteration even when the overall project follows a Waterfall-like structure.
Note: Tasks are not necessarily in exact order, and some tasks may even be done during different stages/phases or repeated throughout the project.
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 involve 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, Product Design, or some variation.
- Researching the industry your client is in
- Develop goals for the product
- Develop and document 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.
- Begin considering accessibility needs of the audience. Accessibility should be considered throughout the project, not added at the end.
- 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 a 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 Scenarios or Journeys
- Determine accessibility requirements and goals, such as keyboard access, readable text, color contrast, alternative text, forms, and multimedia. WCAG is the primary international standard for web accessibility.
- 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 and/or design system
- Optional: 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 considered before doing a full mock-up/comp.
- Create wireframes, comps, mock-ups and/or prototypes of page types
- Figma is commonly used for wireframes, interface design, responsive mock-ups, reusable components, and interactive prototypes. Sketch is another interface design and prototyping application.
- Photoshop is still very useful for creating and editing photographic and bitmap assets, but dedicated interface-design applications such as Figma are generally better suited for full website and app mock-ups.
- Include accessibility in visual and interaction design: readable text and contrast, clear controls and focus states, layouts that tolerate zoom/text enlargement, and accessible forms/navigation.
- Test users using prototypes
- These can be low- or high-fidelity prototypes, such as paper prototypes, interactive visual prototypes (such as in Figma), or even coded prototypes. This task can start very early to catch potential problems before a great deal of time is spent building the final product.
- and more
Development or Production
- Generate and optimize visual assets
- Develop coded templates/pages involving HTML, CSS, JavaScript, etc.
- Use semantic HTML so the structure and meaning of the page are available to browsers, search engines, assistive technology, and other software.
- Develop responsive layouts that work across a useful range of screen sizes and devices.
- Build accessibility into the code with semantic HTML, alternative text, keyboard access, accessible forms, visible focus states, sufficient contrast, and captions/transcripts when appropriate.
- Develop and integrate a database or other back-end features if applicable. This work may start earlier in the project.
- Populate pages either with static content, from a database, CMS(Content Management System), API(Application Programming Interface), or a combination of these
- Use version control such as Git when appropriate
- Continue user and accessibility testing throughout development
Testing and Quality Assurance
Testing should happen throughout a project, but a more complete round of testing normally takes place before launch.
- Functional and usability testing: Check links, navigation, forms, scripts, and whether users can complete important tasks.
- Responsive/browser/device testing: Test important viewport sizes, browsers, and devices for the intended audience.
- Accessibility testing: Check keyboard access, focus, semantic structure, alternative text, forms, contrast, zoom/text resizing, and when possible a screen reader. Automated tools are useful, but manual testing is still necessary.
- Performance and code testing: Check loading speed, image sizes, unnecessary code, and HTML/CSS errors.
- Fix problems and retest. Changes can sometimes introduce new problems, so testing is an iterative process.
Delivery and Maintenance
- Deploy/launch the site
- Test the live production site
- Hand off to a client
- Maintenance: determine who will maintain the site, train the client if needed, update content/software, and continue monitoring accessibility, functionality, security, performance, analytics, and user feedback.
Agile Process
- Agile is a broad approach to developing products through collaboration, frequent feedback, and repeated cycles of development rather than trying to completely define and build the entire product in one long sequence.
- Agile methods are not necessarily less structured than Waterfall. Instead, they usually divide the project into smaller pieces so the team can evaluate working results, respond to new information, and make changes as the project develops.
- Design, development, testing, and evaluation may happen repeatedly rather than only once.
- The client, users, product owner, and other stakeholders may be more involved throughout the project.
- Some Agile frameworks use short, repeating work cycles. Sprints are specifically associated with Scrum.
Scrum
Scrum is one specific framework that is often used to put Agile ideas into practice. Agile and Scrum are related, but they are not the same thing.
- Sprint: A short, fixed-length work cycle focused on a Sprint Goal and a usable product increment.
- Scrum Team: Includes the Product Owner, Scrum Master, and Developers.
- Product Backlog: An ordered, evolving list of work for the product.
- Scrum events: Sprint Planning, Daily Scrum, Sprint Review, and Sprint Retrospective help the team plan, inspect progress, get feedback, and improve.
A web-design project using Scrum might therefore move repeatedly through research, wireframing, design, coding, accessibility work, testing, and feedback rather than completing each activity only once.
How AI is Changing the Process
AI-assisted tools are becoming part of many web design and development workflows. They do not replace the design process, but they can speed up or assist with parts of it.
- Research and design: AI can help summarize information, brainstorm ideas, organize requirements, and generate content, visual directions, or prototype concepts.
- Development and testing: Coding assistants can suggest or explain code, help debug problems, and identify possible usability, accessibility, or performance issues.
- Human judgment is still essential: AI output can be incorrect, inaccessible, biased, inefficient, or inappropriate, so designers and developers still need to review, test, revise, and understand the final work.
In practice, AI is making parts of the process faster and more iterative. It can allow designers and developers to explore more possibilities quickly, but the basic goals of understanding users, solving problems, making good design decisions, writing maintainable code, and testing the final product have not changed.