Web Design Checklist

By July 21, 2016blog

Completing a web design Philippines project can be daunting especially when you are tackling more than one project at the same time. Keeping a semblance of order within the design and development team, we’ve created a checklist. In this way, the team would immediately know if something’s missing, can be changed or added. Notably, considering the ever-changing nature of the interweb, this web design checklist is a living checklist; updates are incorporated religiously.

Warning: The checklist is extensive

Web design checklist

STAGE 1 – PROJECT PREPARATION

If you think web design and development is also about designing and coding, think again. About 60% of the time, the project will involve laying the foundations for the nitty gritty or the actual coding.

1 Setup meeting(s) with the client (project owner)

2 gather briefing documents from the client

2 Gather briefing document(s) from the client

3 Research and understand the client’s company and industry

4 Send project questionnaire to the client

5 Finalize the questionnaire through clarifying and iterating on doubts until reaching an agreement

6 Get quotation(s) for the design, development, copy (content, if required), visuals, and hosting

7 Prepare and send proposal to the client based on specifications and requirements (itemized quotation)

8 Obtain client approval of the proposal

9 Create and send the project acceptance form along with the proposed timeline including the milestones

10 Wait for client signoff

 

STAGE 2 – PROJECT KICKOFF

Upon signoff, the dev team will start doing the dirty work. And, no, no coding just yet. We will get there, though, in no time.

11 Send kickoff email to the client, devs, designers and other key stakeholders

12 Create a sitemap including the proposed pages and sub-pages

13 create wireframe for pages that require custom designs

13 Create wireframes for pages that require custom designs

14 Brief designers on wireframe designs

15 Prepare or obtain copy from the client including the legal texts (Privacy Policy and Terms of Service)

16 Research, prepare, obtain (from the client), buy or change images and other visuals

17 Send designs to the client to obtain approval

18 Incorporate any design changes as required by the client (if there are any)

19 Send the final design to the developers together with the template

20 Send updates to the client

21 Wait for client signoff

 

STAGE 3 – SITE DEVELOPMENT

Upon completion of the designs, the actual developing will start. Before that, though, there is a need to ensure that the developers are ready and so is the production environment.

22 Send finalized designs to the devs

23 Allocate tasks to each developer working on the project

24 Brief the devs (and content creators if necessary) of the timeline and milestones

25 Create a hosting space or buy hosting for the website

26 Create new database(s) and database user(s) if using a CMS or create a site that requires a database

27 Upload the site source files

28 Install or configure the CMS to use the newly created database(s) (or export the database(s) from testing server and import to the production server if the site has already been created)

29 Change the nameservers to be used to the nameservers of the hosting server to be used

30 Create the site sitemap and structure (information architecture)

31 Gather the necessary copy, review, proofread, and make the changes where necessary

32 Populate the site with content as per agreement with the client

33 Populate the site with links primarily social links and footer links

34 Implement on-page search engine optimization (SEO) by checking the uniqueness of HTML elements (tags) and meta description as well as URLs

35 Verify the landing page and keyword match

36 implement analytics

36 Implement analytics through registering and verifying the site with Google Masters and creating and implementing Google Analytics code

37 Exclude relevant IP addresses from analytics tracking

38 Create a favicon

39 Implement a website backup service as necessary

40 Finalize the current iteration and send it to the client for feedback

41 Fix the change requests of the client upon receiving the feedback

42 Send the updates to the client

43 Wait for client signoff

READ MORE: A Complete SEO Checklist for SEOs and Non-SEOs

 

STAGE 4 – SITE VALIDATION

Code quality and everything else must be validated to ensure that these are working as intended.

44 check code quality

44 Check code quality

45 Validate HTML

46 Lint and validate CSS and JavaScript

47 Check HTML5 compatibility

48 Check the internationalization-readiness of the website

49 Check the semantics of the website

50 Fix the site based on the result of the above test

51 Check the content, making sure that the lorem ipsum placeholders are properly removed and replaced

52 Check the linked content (external and internal) and icons, making sure that these are all properly linked, and the links are working

53 check the images

53 Check the images, making sure that these are in their proper pages, are smushed, formatted on the specified dimensions, and working on various devices

54 Check the audio video files, making sure that these are in their proper pages and working on different devices

55 Check the forms such as the Contact Us page and subscription fields (if there are any), making sure that the links are working properly

56 Check any auto-responders, input types, and canned messages, making sure these are working properly and rendered correctly

57 Fix the broken links and any other malfunctioning elements if there are any

58 Integrate social icons, making sure that these are all working properly and directs to the right social page

59 Check metadata as necessary

60 Check the logo, making sure that it is linked to the homepage

61 Check the page load time and optimize the speed where possible

62 Minify CSS and JavaScript, add expire headers, optimize the images, enable Gzip compression and reduce the number of HTTP requests

63 Check the redirects especially the www to non-www redirect, making sure that they are redirecting properly

64 Check the not found pages, making sure that these are properly addressed through custom 404 message if applicable

65 Check the sitemap, making sure that it is a dynamic XML sitemap and verified via Google Webmasters

66 Check third-party tools integration, making sure these tools are functioning properly

67 check the website on multiple browsers and screens

67 Check the website on multiple browsers and screens (possibly on emulators then on real devices)

68 Check that the site is responsive and mobile-friendly

68 check that the site is responsive and mobile-friendly

69 Send the finished site to the client for feedback

70 Fix the site based on the client feedback

71 Send updates to the client

72 Wait for client signoff

READ MORE: Technical Audit Guide

 

STAGE 5 – SITE LAUNCH

If there are further changes, this is the time to incorporate them. Afterward, the site will be ready for launching.

73 Set the finalized site to the client

74 Give access to the client to all the accounts created on its behalf

75 Close project

 

This is the simplest representation of the web design project completion from our perspective. Definitely, there will be changes along the way.