Following our awesome listof 101 tools for web designers and developers, it was time for actually figuring out every step needed to get a web design project done from start to finish. So here it is the ultimate checklist for the web designer/freelancer/agency starting a web design project. Weve covered all the steps you need to do, from the technical and development focused, to those involving client meetings, designers, copy-writing, and everything else in between.
What have we missed? Wed love to hear your opinion!
Contents
- Download a softcopy of the checklist
- Stage 0 Project Start Preparation
- Before you begin: Why not grab our 70+ website design questionnaire to impress clients and win more business?
- Stage 1 Project Kick off
- Stage 2 Development
- Stage 2.1 Set up Hosting Account
- Stage 2.2 Set Up Website Content
- Stage 3 Quality Assurance
- Stage 3.1 Code Quality
- Stage 3.2 Page Content
- Stage 3.3 Optimized User Experience
- Stage 3.4 Responsive and Mobile Friendly
- Are you sure youve ironed out all the kinks?
- Exclusive bonus: 70 things to check before your website goes live
- Stage 4 Launch
- Stage 4.1 Analytics
- Stage 4.2 Search Engine Optimization
- Stage 4.3 Speed and Performance
- Stage 4.4 Usability
- Stage 4.5 Social Media
- Want to download the website design checklist?
Download a softcopy of the checklist
Why not keep a copy of the checklist handy for your next website launch?
* Please disable AdBlocker or similar software, or use a browser without the Ad blocking software. Our downloads are broken by Ad blocking browser extensions.
Hey web designer + creativehuman! Need a live web design checklist?
Have you heard about Wrike?!
Its a tool to help web designers and creatives manage their design projects by keeping track of all tasks which youll need to do to get a website launched or a design project completed.
Check out Wrike Now [FREE Trial!]
Not sure about Wrikeyet? lets just show you the list of tasks youd expect to find within a web design project and see whether you like it a bit more
Stage 0 Project Start Preparation
Is web design only about design? Not really! Although most of us love the creative part of designing and developing a website, there are quite a few things we need to do before we actually get to that. Before we get down to the nitty-gritty well need to lay the groundwork and set a few rules.
1. Setup first meetings[s] with client
2. Define and collect briefing document from the client
3. Define and send a project questionnaireto the client and wait for the clients response. Iterate on doubts you have until everybody is in agreement. Finalize project questionnaire from client
4. Research clients company to understand their brand, the way they communicate, their demographics, target audience
5. Research clients industry to find ways of communicating specifically to the industry, strengths and weaknesses, trends and other industry specifics
6. Get quotation[s] for development effort for the project
7. Get quotations[s] for design or estimate design work with your own designers
8. Get quotation[s] for copy/content or estimate work with your copywriters
9. Get quotation[s] for photography / video production or estimate effort involved
10. Get quotation[s] for Hosting / Domain, particularly if specialized hosting is involved such as VPS hosting, cloud hosting, or special hosting or environment requirements
11. Prepare and send a great web design proposal to the client use the web design quotation tool to send an itemized quotation
12. Get approval from the client of proposal and features to be implemented
13. Create theProject Acceptance Form, and propose a timeline with milestones
14. Send Project Acceptance Form, with timelines to the client and wait for client signoff
Before you begin: Why not grab our 70+ website design questionnaire to impress clients and win more business?
Click here to download* our web design client questionnaire which is specifically designed to impress your clients and help you close more business.
* Please disable AdBlocker or similar software, or use a browser without the Ad blocking software. Our downloads are broken by Ad blocking browser extensions.
Once weve agreed with the client onthe definition of the new website project, we start doing the dirty work. Developers, designers, copywriters, beautiful photography or stock imagery, privacy policies and legal texts, youve got lots of stuff to set in motion when you kick off the project. If youre still not sure which developers youre going to work with, there are plenty of things to take into consideration when finding WordPress developers for hire.
Stage 1 Project Kick off
15. Kick-off email to developers, designers, and other stakeholders
16. Create a sitemap of the website with proposed sections, pages
17. Research and buy template used as a basis for the design
18. Create a wireframe of specific pages which require custom designs
19. Allocate time and effort for a designer to create the wireframes based on the estimates sent to the client and brief designers on wireframe designs.
20. Allocate time and effort for content creation/copy
21. Research, buy and tweak stock images or find free images you can use
22. Allocate time and effort for photography [based on estimates sent to the client]
23. Allocate time and effort for video productions [based on estimates sent to the client]
24. Define privacy policy and other legal text required for the website
25. Send design[s] to the client for approval and wait for approval
26. Get designers to perform any required design changes
27. Send designs to web developers including template, together with designs, for the start of research and development
28. Send specifications and updates to the client and wait for sign off
Once the designs have been completed and youve set the stage forwhat you want the final result to be like, its time to start developing. Besides the developers per se, youve also got to set the environment, ensure the domain is in place and set up correctly, create databases and ensure the production environments are ready.
How are you managing with your web design projects?
If youre like us were always concerned wemight miss that small but crucial step, or that were falling behind on our schedule.
Wrike has helped organize our web design projects with simple tasks lists, and everything which needs to be done in one place.
Its a website design checklist that you can update on the go and watch your progress as it happens.
Try it out for free.
Stage 2 Development
29. Send finalized designs to developers
30. Allocate development checklists to the various developers
31. Agree with all developers + client on a date for Alpha
32. Reach out to content creators and ensure they are on target
Stage 2.1 Set up Hosting Account
33. Ensure youve bought hosting or created a hosting space for your website
34. Create a new database[s], and database users as necessary if you are using a CMS, or a website which requires a database
35. Upload the website source files
36. Install/configure the CMS to use the database you have created
37. If your website has been created already and you need to migrate it, export the database from the testing/staging server and import it to the production server
38. Change the nameservers of the domain you will be using to the nameservers of the hosting server you will be using
Stage 2.2 Set Up Website Content
39. Create the website site map and structure you had defined with the client via your favourite CMS or the framework/technology you have chosen to develop your website
40. Collect all content from the various content creators you have outsourced
41. Quality assure each piece of content you have outsourced or bought and ask for changes where necessary
42. Populate the website content with the various content items you have agreed with the client
43. Define a Contact Us page with correct client details and a map
44. Populate links/iconography with links to relevant social media details
45. Create a link to your website in the footer [if agreed with the client to do this]
46. Send current iteration to client and request feedback
47. Fix and change any requests by the client
48. Send updates to client and wait for client sign-off
There is nothing more important than ensuring the developed product is fit for purpose through several types of quality assurance. After all, this is what will keep your clients coming back for more. An eye for detail here will ensure you will keep getting recommendations and repeat business. Most of all, the things which might not be immediately apparent, but make a significant difference, need to be given due importance.
Besides providing the required functionality, ensure the website you are designing is fast, maintainable, provides an optimal User Experience free from errors and glitches, and make sure it is fully responsive on various types of devices.
Are you able to manage all project interactions in one place?
Theres typically a lot of people involved in a web design project. You. The client. The devs. The designers. And anybody who has been commissioned to provide bits and pieces of the project.
Keeping them all in sync is a bit of a hassle unless youve got the right tool to do so. Thats why we run each project with a website design checklist to make sure we dont forget any step. Wrike does all of this as a service that can be accessed by all your team members.
With Wrike everybody logs into the same project and keeps everybody else updated with whats going on with their part of the project.
Why wait when you can try Wrike with your next project now? You can try it now for free.
Stage 3 Quality Assurance
Stage 3.1 Code Quality
49. Validate HTML using W3C HTML Validator, or your preferred Browser extension such as Validity Chrome Extension, or Html Validator plugin for FireFox
50. Validate CSS using this CSS Validator, Validity for Chrome, or Html Validator
51. Lint your CSS to make it better
52. Use JSLint and JSHint to make your JavaScript better
53. Check whether your website is internationalization ready here
54. Ask for changes from developers based on the results of the above tests
Stage 3.2 Page Content
55. Make sure web copywriting has been proofread and ran through a spelling and grammar checker to check for correctness. Use online tools such as Reverso, or Spellcheckplus.com
56. Check that generic content, such as lorem ipsum, has been properly removed and replaced.
57. See that all images are in the correct places, smushed, formatted, width and height specified and working on all devices.
58. Confirm that videos and audio files are in the correct places, formatted and working on all devices.
59. Test all linked content, such as case studies, ebooks, and whitepapers, and verify that they are correctly linked.
60. Test to see that all internal links across web pages are working properly
Stage 3.3 Optimized User Experience
61. Ensure that Contact Us and other forms are submitting data properly. If the form is sent to an email address ensure that email is received on a mailbox that is monitored, or ensure that content is correctly stored in your database.
62. Verify the Thank-you message or page displayed after the form is submitted
63. Check that Auto-responders are working properly and text in emails has been proofed
64. External links across web pages are working properly, and open in a new tab [Fix any broken links using this tool]
65. Ensure that Social media share icons are working properly that there is a good image for sharing and that the description for sharing is appropriate.
66. Correct your metadata as necessary to ensure social media sharing is working ok.
67. Use the Facebook linterto ensure your Facebook sharing will work well
68. Implement Twitter Cardsand confirm it works well on the Preview tool
69. Ensure that the company logo is linked to the homepage.
70. Check that load time for site pages is optimized [confirm with multiple sources] such as GTMetrix andPingdom tools. If not do the following steps to make your WordPress website load faster
71. Try a non-existing address on your page to check the 404 pages and 404 redirect pages are in place
72. Integrations with third-party tools, such as your CRM, e-commerce software, and/or marketing platform should be tested to ensure they are running smoothly
73. Choose www vs no-www and make sure that ONLY one of them is working to ensure you dont get penalized for duplicate content. After choosing one, make sure one redirects to the other.
74. Check on multiple browsers using browsershotsor browserling
Stage 3.4 Responsive and Mobile Friendly
75. Make sure you are using the viewport meta tag:
76. Check that Google sees your page as Mobile-Friendly. You should have fixed most of the Google Mobile Insights problems here
77. Use correct input types for email, phone and URL input form fields to ensure these are rendered correctly on mobile phones
78. Check how the site looks on emulators such asipads, screenfly, mobilephonesimulator.
79. Test the site using real devices you have accessible to you or use opendevicelab.com
80. Send the finished site to your client and get feedback
81. Fix and change any requests by the client
82.Send updates to client and wait for client sign-off
Once youre happy with the site you have developed you can start thinking about the Launch process and of course how to get the maximum value out of the launched site. There are many tools out there to help you reap maximum benefit for yourself and for your clients.
Besides actually monitoring your site, make sure youve thought well about Search Engine Optimization and Social Media Marketing. Although this is an ongoing process, you need to ensure youve got the basic setup right.
Also, remember a fast website is a pleasant website. Make sure your site has been optimized for performance.
Social if you do it right, Social traffic will be the best source of traffic for your website. Spend enough time on it to get it right the first time.
Are you sure youve ironed out all the kinks?
The few days of testing before a website launch is always a bit hectic [at least it used to be for us]. So many small things to change and test and confirm and re-confirm. Sometimes we sort of lose track of whats done and what isnt.
We believe were not alone. However, weve now made a major step forward and fixed many of our communication problems with a simple, easy to use tool which has given us lots of peace of mind.
You wont magically improve your memory and start remembering things youll need to do but if you just list them down together with our pre-defined list of tasks, well take that load off you and keep them safe for you in Wrike until youve sorted them all out.
Check Wrike out TODAY, set up your next web design project, and see how it can help you too.
Exclusive bonus: 70 things to check before your website goes live
Click here to download* the step-by-step website review checklist to make sure your website goes live in tip-top shape.
* Please disable AdBlocker or similar software, or use a browser without the Ad blocking software. Our downloads are broken by Ad blocking browser extensions.
Stage 4 Launch
Stage 4.1 Analytics
83. Register and verify the site with Google WebMasters aka Google Search Console
84. Create a new property and implement Google Analytics code.
85. Make sure you link Google WebMasters and Google Analytics to be able to get better insights from within Google Analytics
86. Exclude relevant IP addresses [such as office IP] from analytics tracking to ensure your own companys and the clients company do not inflate their website hits
87. Set up any funnels, goals, or tracking events which have been properly created in your analytics software
88. Implement visitor tracking software such as HotJar, CrazyEgg, or Optimizely
89. Implement any site uptime monitor such as Pingdom
90. Implement a website backup service as necessary and make sure site is fully secure, so that it is well protected from hackers and you are not a victim ofWordPress site hacking.
91.Sign-off the deliverables and invoice your client
Stage 4.2 Search Engine Optimization
92. Check that all pages have unique page titles [with a recommended length of fewer than 70 characters, including any keywords].
93. Check that all pages have unique meta descriptions [with a recommended length of fewer than 156 characters, including keywords] the meta description should be human-friendly not optimized for search engines. Think about it this way: If you wanted to use 156 characters to describe exactly what that article contains, what would you say?
94. Verify that pages have your chosen keywords included without any keyword stuffing [do not over-emphasize particular keywords]
95. See that all pages have metadata which is properly in place [with correct spelling and grammar] for any content which you want to be shared via Social
96. Ensure that relevant Alt tags have been added to every image.
97. Make sure that a dynamic XML sitemap [which gets updated with every post you make] has been created and verify that the XML sitemap has been submitted to search engines via Google WebMasters.
98. Ensure that Google is able to read it correctly.
99. Submit to Bing and possibly Yandex WebMasters too.
100. See that all page URLs consistently reflect site information architecture.
101. If you have had another older website, make sure you have 301 redirects in place for all old URLs [redirecting old pages to new ones].
102. Where necessary ensure that rel=nofollow tags are in place on applicable links and pages.
103. Use schema creatorto insert Microdata into your pages [or tag your content in google WebMasters Data Highlighter]
104. Check the semantics of your site usingthis
For more tips, check out our SEO post!
Stage 4.3 Speed and Performance
105. Try to get a PageSpeed score of 90+ this PageSpeed Insights guide from Kinsta will surely help.
106. Minify your javascript
107. Minify yourCSS
108. Add Expires Header Leverage browser caching to ensure that files which dont change often are fetched from the browser cache rather than downloaded again
109. Ensure a Yslow score of 85+
110. Optimize the size of images using Y! Smush.It and replace the existing images with the optimized images
111. Specify image dimensions for each image
112. Enable gzip compression on your hosting server
113. Ensure there are no bad requests, such as missing images or files
114. Combine images using CSS Sprites [use SpriteMe.org to help you generate the sprite image]
115. Reduce the number of HTTP requests by combining the CSS and JS files into as few files as possible
Stage 4.4 Usability
116. Check for HTML5 compatibility using modernizr, and Compat Inspector
117. Create a Favicon generator for each platformhere
118. Enable user and search engine friendly URLs
119. Set up a print stylesheet
Stage 4.5 Social Media
120. Check Facebook Audience Insights to see how people are interacting with your website on Facebook
[Update: Facebook is no longer accepting Facebook Domain Insights applications]
121. Link your website to your Google+ Brand page via instructions foundhere
122. Add humans.txt
123. Create new cover images for other Social Media you use such as Facebook, Twitter, LinkedIn company page, Pinterest, Instagram or others as necessary
124. Send the finished site to your client and get feedback
125. Fix and change any requests by the client
126. Give access to client to all accounts created on their behalf
127. Send updates to client and wait for client sign-off
128. Close project
Want to download the website design checklist?
You might want to file away a copy of the checklist, for your next website launch. Download it from here.
If you always have that nagging feeling at the back of your mind that youve missed out on something weve got a way for you to rest easy. Wrike helps you keep track of all you need to do for your next web design project the good thing is that it takes minutes to set up your next project because weve added task templates for you already.
See how it can help your next project by signing up for a free trial. he back you earned it! For more tips and tricks check out our 101 Tools for Web Designers!