Guide To An
Effective
Website
Development
Process
Design TLC Guide To An Effective Website Development Process
Initial Onboarding (1-2 Weeks)
Client signs a contract and pays a deposit. Following this, they fill out onboarding documents, including:
Client Survey: Ask about business in general, goals for website, target audience, competition
[Link]
Website Credentials Form: A
cquire logins for relevant properties like Domain Registration, Website
Hosting, CRM and Social Media URLs
SEO Questionnaire: Competitor websites, Google Analytics, ask about any SEO development history,
keywords and competition in order to do some initial keyword research for the new website
Content Inventory: Use a Google Sheet and list all front-facing pages on the existing website (if there is
an existing website to begin with), with a description of content and images on each page:
Complete Content Inventory: In addition to the “manual” inventory, use a tool like Screaming Frog or
DynoMapper to pull a list of urls for the current site. This is used to anticipate the amount of content to
be migrated to the new site and/or the number of redirects which may be needed upon site launch.
Design TLC Guide To An Effective Website Development Process
Timeline & Teamwork
In the Google Sheet, create a tab with a preliminary/rough timeline.
Teamwork Project Management System
For complete/intensive website projects, you may use a project management system like Teamwork
which allows you to schedule and assign tasks, store files and links, and communicate with a messaging
tool.
Teamwork Project Management Dashboard
Design TLC Guide To An Effective Website Development Process
Information Architecture & Initial Content Development (6 weeks)
Working with the client and, ideally, a content writer, the next step is to develop a well thought out
Information Architecture (IA) for the website. Ideally, the writer suggests clear direction for navigation as
well as messaging, tone and even made some creative suggestions for the website design.
Examples of Information Architecture Document
Design TLC Guide To An Effective Website Development Process
Wireframe (3 weeks)
Once the IA document is approved, wireframing can begin. A wireframe is a visual representation of the
IA, broken into pages. [Link], helps make wireframe development easier with drag and drop
elements, live sharing and easy editing. A wireframe is not a design, but aids in the design process by
organizing and prioritizing content
.
Example of wireframe
Design TLC Guide To An Effective Website Development Process
Design (3 weeks)
Use Sketch, Photoshop or whichever software you are familiar with to create webpage design prototypes. The
elements from the prototype can be exported for use on the web. Sketch also connects/syncs to I nvision,
which is a prototyping tool that allows the presentation of the mock-up designs to more closely resemble an
actual website and includes some interactivity (hover effects, links, etc.). Invision also has a live share and
commenting feature which makes the presentation process more professional.
If the client has a logo, it is best to use or create an svg version of the logo. Use the S
VG Support plugin for
WordPress, which allows easy implementation of svg graphics using the media library.
For design ideas, we look at competitor websites and other websites in the same or similar category, as well as
some unrelated websites, for inspiration.
Website Design in Sketch
Design TLC Guide To An Effective Website Development Process
Website Prototype in InDesign
Once the design is tweaked and client feedback addressed, the design is approved. This signals the
official start of development and coding on a staging server. You may want to start development to some
degree before this point, if there are elements in the design you want to check out before presenting to
ensure you can deliver the functionality/effects. Design approval is a key milestone. The design is like
the blueprints of a house. Once the foundation is laid and the walls are framed and painters have painted
the walls, it is a significant request to ask walls to be moved, foundations to be expanded, and walls to be
repainted. A significant request is a change order, which increases the cost of the project. If the design is
based on a well thought out IA and wireframe, the chances of changes after design approval are small. If
the IA and wireframe steps are skipped, it is more likely that the design will need changes because the
content will change as the client “sees” the website unfold. This is why the content planning, architecture
and wireframe steps are so important.
Design TLC Guide To An Effective Website Development Process
Final/Complete Content Development (6 weeks)
Every word of content does not have to be finalized when the design is approved, but it should be close. The
first couple of weeks of development are typically spent building the “frame” of the website. The content of all
the rooms - the text and images - will be needed once the frame is up. The more thorough and complete this
content is, the faster and smoother the building process will be. Here again, working with a professional writer
who knows how to format and provide clear, concise copy, makes the process go smoothly and the end result
better. Minor edits will likely be made before launch, but loading in copy that is organized and approved is the
ideal process.
In addition to the copy, images for each page of a website can be a huge undertaking, especially if there are a
lot of pages and a lot of images to choose from. Create another sheet in your Content Inventory Document to
list the content, including images, for a website. This helps identify content that is missing and prevent images
from being duplicated. The images can be shared with the client in a Dropbox or Google Drive, and ideally
should be named for where they will go to make the process less confusing.
Final content outline
Design TLC Guide To An Effective Website Development Process
Development (8 weeks)
Start with a comprehensive style guide to help code the child theme. This makes theme development
([Link]) smooth and consistent. If you are using sass, this is also a helpful guide.
Once the content is loaded into the site, each page gets attention for specific design/style and is also reviewed
for mobile responsiveness. This process often begins around the same time that the staging site is presented
to the client, so that they can see the direction of individual page styling and content and provide any feedback
before it gets too far along.
Development moves forward to address any issues found by the client on the staging site, to add additional
images and content and make other tweaks to design for various screen sizes and browsers.
Design TLC Guide To An Effective Website Development Process
Final Pre-Launch Tasks (1-2 weeks)
In the last days before launch, the client will likely send edits. Have the client use a Google Drive/Google Sheet
for this, because changes can be tracked and new change requests can be added.
Creating 301 Redirects is important to ensure that pages from the former site are not lost when the new
website is launched. This can be done with a plugin, or with code to be placed in the .htaccess file. Check to
ensure the best version of PhP is running on the site (currently 7.0).
Example of 301 Redirects
Launch
On launch day, ideally, work with the client’s IT company to change the DNS settings. If there is no IT provider,
change the A Record for the domain. Avoid touching the main name servers and/or MX (mail) records if at all
possible.
After the DNS has been changed, monitor the propagation with a tool like h ttps://[Link]/.
Ensure the SSL certificate is installed on the live domain. Change the settings on the staging site and do a
complete Search/Replace to change all the staging urls on the site to the live url. Check the [Link] file and
other settings in Google Search Console and ensure the site is working in Google Analytics.
Design TLC Guide To An Effective Website Development Process
Post Launch
1-2 weeks after launch, meet with the client to do a tutorial in person or via video call. You may choose to
create a PDF with some specific instructions for general as well as site-specific tasks. This provides an
opportunity to make any minor edits with the client and show them how to make changes, upload images, write
blog posts, etc.
This is also the time when you can move clients on to a maintenance plan - it is a good idea to offer options for
levels of website care.
Lastly, do a debrief to compare your estimated to actual hours spent. This is helpful in creating future website
proposals. It is a good idea (even if it is hard!) to track your time as accurately as possible using a tool like
Toggl.
Celebrate!
Share the good news on social media and document what worked
and what you would change to improve the process next time.
Design TLC Guide To An Effective Website Development Process