"Before anything else, preparation is the key to success." Alexander Graham Bell
As you begin to think about the quote above, what exactly comes to mind? Hopefully, you begin to understand the importance of coming up with a plan to effectively execute your goal.
Let's keep that mindset in understanding the process of developing a website. You must start with a few steps to execute the process. As you complete this lesson you will develop an understanding of those steps and the importance of keeping usability and accessibility in mind, as web developers endure when creating websites that are visually appealing and user-friendly for all.
Understanding the Process
In the world of website creation, understanding the crucial steps is key to success. Learn about the steps in the web development process below.
Web Development Process
Click each tab to learn about the web development process.
Research and Analysis – 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 such as:
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 – The information is gathered and incorporated into the site plan. Developing a sitemap with an outline of what will be included in the site.
The pages that will be included and if there will be a need for professional photography and graphic design.
Timelines, deliverables, and resources and technology needed are defined.
💻 Designing
Designing – Determine the look of the website.
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.
Determine the color scheme and color palette for the site.
Determine the layout to give the right feel for the site using 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
Content Creation – 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.
Includes branding and marketing the site and/or web app that is part of the project.
🏗 Development
Development – 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.
☑ Testing and Quality
Testing and Quality Assurance – 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.
Tests everything from all the functions on the site to making sure the site will perform well with a heavy load of viewers.
Now that you have learned about the process of web development, there are two concepts that can be useful in the process, usability and accessibility.
Navigation for Usability
Navigation in website design refers to how easily the user can navigate, or get around, the site. If a user has difficulty getting around the site, then they are not as likely to stay on the site or revisit the site at another time. It is important to make it as easy as possible for your user to navigate the site.
The User Experience (UX):
Focuses on having a deep understanding of users, what they need, what they value, their abilities, and their limitations.
Considers the business goals and objectives of the group managing the project.
Promote improving the quality of the user’s interaction with and perceptions of your product and any related services.
When designing your sites, keep usability in mind.
Accessibility Considerations
Accessibility refers to making sure your site is accessible to people with varying disabilities. When considering usability and user experience, it is important to also consider that your site will likely be accessed by people with disabilities. Therefore, you need to provide options to make it easier for those people to access your site and the information on the site.
The website you create must be accessible to everyone. Discussions about accessibility issues should be held during the planning process to ensure equal access is available to all features on the website. Visually impaired individuals use a screen reader to gain an understanding of images that are displayed on the website, therefore alternate text must be coded when images are uploaded to the website to allow this. If a member of your target audience has a hearing impairment, providing a transcript of an audio file will provide her/him with the information needed to understand the message shared on the web page.
Practice Activity
Web Development Process Self-Assessment
Let's see if you can complete the self-assessment, how many can you get correct?
Reflection
It takes time and effort to create a well-designed website but it is within your reach if you keep the web development process in mind. Accessibility and usability are key concepts to consider throughout the web development process, highlighting the importance of easy navigation for users and accessibility for individuals with disabilities.
[CC BY-NC-SA 4.0Links to an external site.] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION - INTENDED ONLY FOR USE WITHIN LESSON.
WD - Website Development [OVERVIEW] WD - A Professional Layout [LESSON]