[vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” class=”checklists” overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default”][vc_row_inner text_align=”left”][vc_column_inner column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ width=”1/1″][vc_column_text]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[/vc_column_text][divider line_type=”No Line” custom_height=”30″][text-with-icon icon_type=”font_icon” icon=”icon-list” color=”Extra-Color-2″]

 Web design checklist

[/text-with-icon][vc_column_text]

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.[/vc_column_text][divider line_type=”No Line” custom_height=”30″][fancy-ul icon_type=”font_icon” icon=”icon-check” color=”Extra-Color-3″]

•  Setup meeting(s) with the client (project owner)
  
• Gather briefing document(s) from the client
• Research and understand the client’s company and industry
• Send project questionnaire to the client
• Finalize the questionnaire through clarifying and iterating on doubts until reaching an agreement
• Get quotation(s) for the design, development, copy (content, if required), visuals, and hosting
• Prepare and send proposal to the client based on specifications and requirements (itemized quotation)
• Obtain client approval of the proposal
• Create and send the project acceptance form along with the proposed timeline including the milestones
• Wait for client signoff

[/fancy-ul][divider line_type=”No Line” custom_height=”30″][vc_column_text]

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.[/vc_column_text][/vc_column_inner][/vc_row_inner][fancy-ul icon_type=”font_icon” icon=”icon-check” color=”Extra-Color-3″]

• Send kickoff email to the client, devs, designers and other key stakeholders
• Create a sitemap including the proposed pages and sub-pages
  
• Create wireframes for pages that require custom designs
• Brief designers on wireframe designs
• Prepare or obtain copy from the client including the legal texts (Privacy Policy and Terms of Service)
• Research, prepare, obtain (from the client), buy or change images and other visuals
• Send designs to the client to obtain approval
• Incorporate any design changes as required by the client (if there are any)
• Send the final design to the developers together with the template
• Send updates to the client
• Wait for client signoff

[/fancy-ul][divider line_type=”No Line” custom_height=”30″][vc_column_text]

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.[/vc_column_text][fancy-ul icon_type=”font_icon” icon=”icon-check” color=”Extra-Color-3″]

• Send finalized designs to the devs
• Allocate tasks to each developer working on the project
• Brief the devs (and content creators if necessary) of the timeline and milestones
• Create a hosting space or buy hosting for the website
• Create new database(s) and database user(s) if using a CMS or create a site that requires a database
• Upload the site source files
• 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)
• Change the nameservers to be used to the nameservers of the hosting server to be used
• Create the site sitemap and structure (information architecture)
• Gather the necessary copy, review, proofread, and make the changes where necessary
• Populate the site with content as per agreement with the client
• Populate the site with links primarily social links and footer links
• Implement on-page search engine optimization (SEO) by checking the uniqueness of HTML elements (tags) and meta description as well as URLs
• Verify the landing page and keyword match
  
• Implement analytics through registering and verifying the site with Google Masters and creating and implementing Google Analytics code
• Exclude relevant IP addresses from analytics tracking
• Create a favicon
• Implement a website backup service as necessary
• Finalize the current iteration and send it to the client for feedback
• Fix the change requests of the client upon receiving the feedback
• Send the updates to the client
• Wait for client signoff

[/fancy-ul][vc_column_text]

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

[/vc_column_text][divider line_type=”No Line” custom_height=”30″][vc_column_text]

STAGE 4 – SITE VALIDATION

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

[/vc_column_text][fancy-ul icon_type=”font_icon” icon=”icon-check” color=”Extra-Color-3″]

• Check code quality
• Validate HTML
• Lint and validate CSS and JavaScript
• Check HTML5 compatibility
• Check the internationalization-readiness of the website
• Check the semantics of the website
• Fix the site based on the result of the above test
• Check the content, making sure that the lorem ipsum placeholders are properly removed and replaced
• Check the linked content (external and internal) and icons, making sure that these are all properly linked, and the links are working
  
• Check the images, making sure that these are in their proper pages, are smushed, formatted on the specified dimensions, and working on various devices
• Check the audio video files, making sure that these are in their proper pages and working on different devices
• Check the forms such as the Contact Us page and subscription fields (if there are any), making sure that the links are working properly
• Check any auto-responders, input types, and canned messages, making sure these are working properly and rendered correctly
• Fix the broken links and any other malfunctioning elements if there are any
• Integrate social icons, making sure that these are all working properly and directs to the right social page
• Check metadata as necessary
• Check the logo, making sure that it is linked to the homepage
• Check the page load time and optimize the speed where possible
• Minify CSS and JavaScript, add expire headers, optimize the images, enable Gzip compression and reduce the number of HTTP requests
• Check the redirects especially the www to non-www redirect, making sure that they are redirecting properly
• Check the not found pages, making sure that these are properly addressed through custom 404 message if applicable
• Check the sitemap, making sure that it is a dynamic XML sitemap and verified via Google Webmasters
• Check third-party tools integration, making sure these tools are functioning properly
  
• Check the website on multiple browsers and screens (possibly on emulators then on real devices)
• Check that the site is responsive and mobile-friendly
  
• Send the finished site to the client for feedback
• Fix the site based on the client feedback
• Send updates to the client
• Wait for client signoff

[/fancy-ul][vc_column_text]

READ MORE: Technical Audit Guide

[/vc_column_text][divider line_type=”No Line” custom_height=”30″][vc_column_text]

STAGE 5 – SITE LAUNCH

If there are further changes, this is the time to incorporate them. Afterward, the site will be ready for launching.[/vc_column_text][fancy-ul icon_type=”font_icon” icon=”icon-check” color=”Extra-Color-3″]

• Set the finalized site to the client
• Give access to the client to all the accounts created on its behalf
• Close project

[/fancy-ul][vc_column_text]This is the simplest representation of the web design project completion from our perspective. Definitely, there will be changes along the way.[/vc_column_text][/vc_column][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default”][/vc_column][/vc_row]