PAE - Web Development Life Cycle [LESSON]

Web Development Life Cycle

Image showing the Web Development Life Cycle.

When developing a website, there are several stages that the web development team will go through to get the site on the web.  This is referred to as the Web Development Life Cycle. We often want to skip the first few stages and just start coding; however, if we do this, we will end up with poor quality sites.  It takes time and effort to create a well-designed website.  Usually, this involves a team of people, not just the coder.  The team involved depends on the size of the site as well as the company that is developing the site.  Some web design companies are very small and consist of only 2-3 people, larger web design companies will have larger teams and sometimes multiple teams.  Some of the team members may include the following:

  1. Researcher
  2. Graphic Designer
  3. Content Creator
  4. Web Developer
  5. Project Manager

The Web Development Process

  • Research and Analysis – In this stage, you gather information about the project, the client, and the target market to determine what needs to be included in the project. There are several questions that need to be answered at this stage. 
    • What is the purpose of the website? Sell a product or service? Provide information?
    • What are the objectives of the site?
    • Who is the target audience? This involves understanding market segmentation and target marketing. You must know what specific group of people you want to reach with the site so you can design a site that will appeal to that group. This involves understanding the age, gender, likes, dislikes, location, interests, etc.
    • What are your users needing and looking for? Is there a demand for this site?
    • What does the client expect to get from the site?
    • What features does the client want to be included in the site?
  • Planning – After the information is gathered, you will start planning the site. This person or team will take the information gathered and incorporate it into the site plan. They will develop a sitemap with an outline of what will be included in the site. This will include the basic information, such as the pages that will be included and if there will be a need for professional photography and graphic design. This group will determine timelines for the site and define the deliverables for the rest of the project. This group will determine what resources and technology will be needed for the site. 
  • Designing – In the design stage of the project, the team will determine the look of the website. It is important to consider the UI and UX of the site. UI stands for user interface; this is how the user will interact with the site.  UX is the user experience; this is how the user will experience the site and how it makes them feel. This team will determine the color scheme and color palette for the site.  They will determine the layout to give the right feel for the site.  They will use wireframes or storyboards to lay out the site. The wireframe is a basic outline; it usually just has the very basics and doesn’t really have a lot of visual information.  The storyboard is more visual and is a rough sketch of each page of the site, showing the navigation, buttons, tabs, typography, and graphics, where the copy (writing) will be, where the pictures will be located, where the logo will be located, etc.
  • Content Creation – This stage of the process is when the information that is going to be included in the site is created. This includes writers writing the “copy,” which is the written content. This also includes videos, photography, graphic designers designing graphic content, audio, animation, and any other content that will be included in the site.  This isn’t exciting, but it is important.  When it comes down to it, the most important thing is to communicate with the viewer. This stage is the communication stage; it is important to make the site easy-to-understand and attractive to the viewer.  This stage also includes branding and marketing the site and/or web app that is part of the project. 
  • Development – This stage is when the site is built. The web developers take the information from the previous stages and build the website. This includes coding using HTML, CSS, JavaScript, jQuery, and any other coding necessary. There are two parts to the development process: front-end and back-end development. The front-end developer does the coding and uses web frameworks and development tools to create the sites.  The front-end developer is responsible for the visual elements of the site. The back-end developer works with the servers to make sure the site will function as needed.  The back-end developer creates databases, writes applications, and works with several technologies and programming languages. Back-end developers also work with Search Engine Optimization (SEO) which are features to get higher rankings for the site in search engines.
  • Testing and Quality Assurance – This team tests the site to make sure everything is working properly before the site is launched on the web. They check the web and accessibility standards as well as make sure the site is compliant with copyright requirements. The team tests everything from all the functions on the site to making sure the site will perform well with a heavy load of viewers. After the site has launched, the team maintains the site to make sure it continues to perform as expected. This team will continuously work on the site to keep it up and running smoothly. 

Front-End vs. Back-End Development

When you look at a website, you are seeing the front-end of the site.  The front-end development focuses on the part that users see and interact with.  The front-end can also be thought of as the client-side of development, as it deals with what the user or client sees. Front-end developers use HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JS (JavaScript) to build the visual side of the website. The front-end developer wants to make sure the site is easy to use and functions well for the user. This includes making buttons, developing layouts, the navigation bar, images, animations, graphics, and organizing content.

Back-end development focuses on the part of the site that the user doesn’t see but makes the site work. Back-end can also be thought of as server-side development. Back-end developers use such languages as PHP, Java, Python, MySQL, and a variety of frameworks. Back-end developers often work with databases that help the site to work properly as well as give information to the site owners. Back-end developers build code, trouble-shoot and debug web applications, manage databases, and use frameworks.

The role of front-end development and back-end development can be likened to an iceberg, what you see is only 10% of the whole thing.  While you see the nice site and interact with it, behind the scenes the back-end is making the whole thing work.

Image showing front-end vs back-end development.

Directions: Put the Web Development Life Cycle in order by placing the gray cards.

Learning Object Transcript Links to an external site.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION