{"id":11012,"date":"2017-05-05T11:47:26","date_gmt":"2017-05-05T11:47:26","guid":{"rendered":"https:\/\/www.process.st\/templates\/web-design-process\/"},"modified":"2024-02-28T19:48:23","modified_gmt":"2024-02-28T19:48:23","slug":"web-design-process","status":"publish","type":"post","link":"https:\/\/www.process.st\/templates\/web-design-process\/","title":{"rendered":"Web Design Process"},"content":{"rendered":"<section id=\"introduction-to-web-design-process\">\n<h2> Introduction to Web Design Process<\/h2>\n<div class=\"image-content\">\n<figure>\n   <a href=\"https:\/\/www.process.st\/templates\/wp-content\/uploads\/2024\/02\/upr6T9hDTjFzBwLPHONEXA.png\" alt=\"Web Design Process\" target=\"_blank\" rel=\"noopener\"> <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.process.st\/templates\/wp-content\/uploads\/2024\/02\/upr6T9hDTjFzBwLPHONEXA.png\"> <\/a><figcaption>\n     Web Design Process<br \/>\n<\/figcaption><\/figure>\n<\/div>\n<div class=\"text-content\">\n<h4>Web Design Process Purpose<\/h4>\n<p>The purpose of the web design process detailed in this template is to provide a <strong>common space for the designer and the client to work through the project<\/strong>.&nbsp;<\/p>\n<p>Throughout this checklist, you will be presented with form fields and file uploads. Utilizing these features allows you to <a href=\"https:\/\/www.process.st\/document-workflows\/\" rel=\"nofollow noopener\" target=\"_blank\">record all the information<\/a> pertaining to the project in one place.<\/p>\n<h4>Tips and tricks<\/h4>\n<p>When you run this checklist, make sure it is assigned to <strong>all the necessary persons involved<\/strong> in the project. The template is designed to accommodate a designer and a product manager, but other people can be added in also.<\/p>\n<p>If you determine the timeline of the project and set dates for delivery of different stages, you can assign these to <a href=\"https:\/\/www.process.st\/task-automation-tools\/\" rel=\"nofollow noopener\" target=\"_blank\">individual tasks<\/a>. If you click on a task in the editing screen, you will notice there are two options underneath the title: <strong>Assign and Due after<\/strong>. You can use this setting to place deadlines on different tasks.&nbsp;<\/p>\n<p>Check out this video below for 5 key things you should be aware of and keep in mind when tackling the web design process:<\/p>\n<\/div>\n<div class=\"video-content\">\n<div class=\"iframe-container\">\n   <iframe src=\"https:\/\/www.youtube.com\/embed\/bZP8okOgK6w?modestbranding=1&amp;showinfo=0\" frameborder=\"0\" allowfullscreen=\"true\"> <\/iframe><\/div>\n<div class=\"description\">\n    Navigate Your Web Design Process in 5 Steps by SyneCore Tech<\/div>\n<\/div>\n<\/section>\n<section id=\"record-client-details\">\n<h2> Record client details<\/h2>\n<div class=\"text-content\">\n<p>Use this space to record important contact information for future reference.<\/p>\n<\/div>\n<div class=\"text-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Name <\/label><br \/>\n<input type=\"text\" placeholder=\"Something will be typed here...\" disabled=\"disabled\" class=\"form-control\"><\/div>\n<\/div>\n<div class=\"text-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Company <\/label><br \/>\n<input type=\"text\" placeholder=\"Something will be typed here...\" disabled=\"disabled\" class=\"form-control\"><\/div>\n<\/div>\n<div class=\"textarea-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Notes <\/label><br \/>\n<textarea placeholder=\"Something will be typed here...\" rows=\"3\" disabled=\"disabled\" class=\"form-control\"><\/textarea><\/div>\n<\/div>\n<\/section>\n<section id=\"hold-initial-briefing-meeting\">\n<h2> Hold initial briefing meeting<\/h2>\n<div class=\"text-content\">\n<p>The initial planning <a href=\"https:\/\/www.process.st\/run-a-meeting\/\" rel=\"nofollow noopener\" target=\"_blank\">meeting<\/a> will serve as a <strong>crucial reference point for the project<\/strong>.&nbsp;<\/p>\n<p>This meeting allows for the scope to be defined and understood so that subsequent outline documents can be prepared.<\/p>\n<p><strong>Use the subchecklist below<\/strong> to define the meeting's agenda, and <strong>use the form fields to collect that information<\/strong>.<\/p>\n<\/div>\n<div class=\"multi-select-content form-field-content\">\n<ul class=\"items\">\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       1<\/div>\n<\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/div>\n<div class=\"item-name-static\">\n      Discuss company branding strategy<\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       2<\/div>\n<\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/div>\n<div class=\"item-name-static\">\n      Outline the scope of the project<\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       3<\/div>\n<\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/div>\n<div class=\"item-name-static\">\n      List websites to take inspiration from<\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       4<\/div>\n<\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/div>\n<div class=\"item-name-static\">\n      Determine the purpose of the website<\/div>\n<\/li>\n<li class=\"item\">\n<div class=\"step-number-container\">\n<div class=\"step-number\">\n       5<\/div>\n<\/div>\n<div class=\"step-checkbox-container\">\n<div class=\"step-checkbox\"><\/div>\n<\/div>\n<div class=\"item-name-static\">\n      Clarify the budget and timeframe<\/div>\n<\/li>\n<\/ul>\n<\/div>\n<div class=\"textarea-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Describe the company's existing branding strategy <\/label><br \/>\n<textarea placeholder=\"Something will be typed here...\" rows=\"3\" disabled=\"disabled\" class=\"form-control\"><\/textarea><\/div>\n<\/div>\n<div class=\"file-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Upload existing branding materials, if applicable <\/label><\/p>\n<div class=\"file-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-upload btn-icon\"><\/i> File will be uploaded here <\/button><\/div>\n<\/div>\n<\/div>\n<div class=\"textarea-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> List the parameters of the project including deliverables <\/label><br \/>\n<textarea placeholder=\"Something will be typed here...\" rows=\"3\" disabled=\"disabled\" class=\"form-control\"><\/textarea><\/div>\n<\/div>\n<div class=\"text-content\">\n<p>Enter 5 websites to take inspiration from in the form fields below<\/p>\n<\/div>\n<div class=\"textarea-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Use this section to provide any accompanying notes related to the websites listed <\/label><br \/>\n<textarea placeholder=\"Something will be typed here...\" rows=\"3\" disabled=\"disabled\" class=\"form-control\"><\/textarea><\/div>\n<\/div>\n<div class=\"textarea-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Describe the key purpose, or aims, of the website <\/label><br \/>\n<textarea placeholder=\"Something will be typed here...\" rows=\"3\" disabled=\"disabled\" class=\"form-control\"><\/textarea><\/div>\n<\/div>\n<div class=\"text-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Enter the budget for the project <\/label><br \/>\n<input type=\"text\" placeholder=\"Something will be typed here...\" disabled=\"disabled\" class=\"form-control\"><\/div>\n<\/div>\n<div class=\"date-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Record the deadline for final delivery <\/label><\/p>\n<div class=\"date-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-calendar btn-icon\"><\/i> Date will be set here <\/button><\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"prepare-a-project-charter\">\n<h2> Prepare a project charter<\/h2>\n<div class=\"text-content\">\n<p>The project charter should record the key information gathered from the previous meeting in the form of a report.<\/p>\n<p>This document can be referenced within the contracting stage as an agreed upon overview of the project.&nbsp;<\/p>\n<p><strong>Use the form field below<\/strong> to upload the project charter.<\/p>\n<\/div>\n<div class=\"file-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Project charter <\/label><\/p>\n<div class=\"file-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-upload btn-icon\"><\/i> File will be uploaded here <\/button><\/div>\n<\/div>\n<\/div>\n<div class=\"text-content\">\n<p>If the client agrees with the charter, click to complete the task.&nbsp;<\/p>\n<\/div>\n<\/section>\n<section id=\"finalize-contracts-so-that-work-can-begin\">\n<h2> Finalize contracts so that work can begin<\/h2>\n<div class=\"text-content\">\n<p><strong>A good contract protects both the client and the designer<\/strong>.&nbsp;<\/p>\n<p>You can find a series of example <a href=\"https:\/\/www.smashingmagazine.com\/2012\/08\/free-download-useful-legal-documents-for-designers-pdf\/\" rel=\"nofollow noopener\" target=\"_blank\">contracts and templates here<\/a> with an explanation from Smashing Magazine about the purpose and scope of each contract.<\/p>\n<p>The designer should prepare the contract and upload it into the first form field.&nbsp;<\/p>\n<\/div>\n<div class=\"file-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Upload the contract here <\/label><\/p>\n<div class=\"file-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-upload btn-icon\"><\/i> File will be uploaded here <\/button><\/div>\n<\/div>\n<\/div>\n<div class=\"select-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Do you, the client, agree to this contract? <\/label><br \/>\n<select disabled=\"disabled\" class=\"form-control\"><option value=\"An option will be selected here\">An option will be selected here<\/option><\/select><\/div>\n<\/div>\n<div class=\"file-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> The designer should upload the signed contract here <\/label><\/p>\n<div class=\"file-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-upload btn-icon\"><\/i> File will be uploaded here <\/button><\/div>\n<\/div>\n<\/div>\n<div class=\"file-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> The client should upload their signed contract here <\/label><\/p>\n<div class=\"file-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-upload btn-icon\"><\/i> File will be uploaded here <\/button><\/div>\n<\/div>\n<\/div>\n<div class=\"text-content\">\n<p>Alternatively, you can use digital signatures to speed up the process and save on printing.&nbsp;<\/p>\n<p>Services like <a href=\"https:\/\/www.docusign.com\/\" rel=\"nofollow noopener\" target=\"_blank\">DocuSign<\/a> and <a href=\"https:\/\/www.hellosign.com\/\" rel=\"nofollow noopener\" target=\"_blank\">HelloSign<\/a> can speed up your contracting processes.&nbsp;<\/p>\n<p>If you have used one of these services to conduct your signing, upload the final agreement in the form field below.<\/p>\n<\/div>\n<div class=\"file-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Final contract <\/label><\/p>\n<div class=\"file-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-upload btn-icon\"><\/i> File will be uploaded here <\/button><\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"formulate-the-structure-of-the-website\">\n<h2> Formulate the structure of the website<\/h2>\n<div class=\"text-content\">\n<p>The most foundational document for a website is the sitemap. This determines the information architecture and will define the base from which the wireframes are built.&nbsp;<\/p>\n<p><strong>Use the form field below<\/strong> to upload a sitemap.<\/p>\n<\/div>\n<div class=\"file-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Upload the sitemap here <\/label><\/p>\n<div class=\"file-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-upload btn-icon\"><\/i> File will be uploaded here <\/button><\/div>\n<\/div>\n<\/div>\n<div class=\"text-content\">\n<p>You can begin working on the wireframes in order to present a basic overview of how the website may look.&nbsp;<\/p>\n<p>Initial wireframes could be done on paper or mocked up digitally. These should represent the skeleton of the website upon which further design work will be based.&nbsp;<\/p>\n<p>You can also consult our UX Design Process checklist if necessary for an in-depth approach to user experience design.&nbsp;<\/p>\n<p>Upload the initial wireframes in the form field below and seek approval from the client. Notes and thoughts about the wireframes can be recorded by the client in the final form field.<\/p>\n<\/div>\n<div class=\"file-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Upload the initial wireframes <\/label><\/p>\n<div class=\"file-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-upload btn-icon\"><\/i> File will be uploaded here <\/button><\/div>\n<\/div>\n<\/div>\n<div class=\"select-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Do you approve the wireframes presented <\/label><br \/>\n<select disabled=\"disabled\" class=\"form-control\"><option value=\"An option will be selected here\">An option will be selected here<\/option><\/select><\/div>\n<\/div>\n<div class=\"textarea-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Use this section to record your notes on the wireframes <\/label><br \/>\n<textarea placeholder=\"Something will be typed here...\" rows=\"3\" disabled=\"disabled\" class=\"form-control\"><\/textarea><\/div>\n<\/div>\n<\/section>\n<section id=\"design-initial-mockups\">\n<h2> Design initial mockups<\/h2>\n<div class=\"text-content\">\n<p>Take the information gained in the initial briefing meeting and the feedback on the initial wireframes and create a first iteration of site mockups.&nbsp;<\/p>\n<p>While still formulating the look and feel of the site, it is important to <strong>provide options and variety<\/strong>.&nbsp;<\/p>\n<p>Choose 3 key screens and make 3 variations of each. This is an opportunity to present different typefaces, color palettes, and icons.&nbsp;<\/p>\n<p><strong>Use the form field below<\/strong> to upload a presentation PDF detailing the different options formulated ready for further discussion.&nbsp;<\/p>\n<\/div>\n<div class=\"file-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Upload the first design iterations below <\/label><\/p>\n<div class=\"file-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-upload btn-icon\"><\/i> File will be uploaded here <\/button><\/div>\n<\/div>\n<\/div>\n<div class=\"text-content\">\n<p>Use the email widget below to send the initial mockups to <strong>any other key stakeholders<\/strong> who might not be participating in this checklist.<\/p>\n<\/div>\n<\/section>\n<section id=\"host-a-meeting-to-discuss-the-mockups\">\n<h2> Host a meeting to discuss the mockups<\/h2>\n<div class=\"text-content\">\n<p>The discussion of the initial mockups and how they can be improved is a very important moment in the ideation process. This is the first point where the client can see what the designer thinks about what the final product should look and feel like.&nbsp;<\/p>\n<p>It is important to <strong>be open and honest in this meeting<\/strong> to find positives in the work and to formulate constructive criticisms which can improve the mockups.&nbsp;<\/p>\n<p>Use the form fields below to record the details of the discussion.<\/p>\n<\/div>\n<div class=\"date-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Date of the meeting <\/label><\/p>\n<div class=\"date-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-calendar btn-icon\"><\/i> Date will be set here <\/button><\/div>\n<\/div>\n<\/div>\n<div class=\"textarea-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Notes of the meeting <\/label><br \/>\n<textarea placeholder=\"Something will be typed here...\" rows=\"3\" disabled=\"disabled\" class=\"form-control\"><\/textarea><\/div>\n<\/div>\n<div class=\"textarea-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Action points of the meeting <\/label><br \/>\n<textarea placeholder=\"Something will be typed here...\" rows=\"3\" disabled=\"disabled\" class=\"form-control\"><\/textarea><\/div>\n<\/div>\n<\/section>\n<section id=\"begin-to-draw-up-refined-designs\">\n<h2> Begin to draw up refined designs<\/h2>\n<div class=\"text-content\">\n<p>Once there is a clear direction inspired by the initial mockups, it is possible to move forward and begin fleshing out a single concept.&nbsp;<\/p>\n<p>Clark Wimberly, <a href=\"https:\/\/www.invisionapp.com\/blog\/reimagine-web-design-process\/\" rel=\"nofollow noopener\" target=\"_blank\">writing for Invision<\/a>, argues that designers now should think differently to designers of only a few years ago. The adage Mobile First has been popular for a significant amount of time, but it is only recently that <strong>mobile traffic has begun to outstrip desktop traffic<\/strong>.&nbsp;<\/p>\n<p>This is an important consideration for any designer and means that your&nbsp;designs must not see mobile as an afterthought.&nbsp;<\/p>\n<p>Build out the design concept you have chosen and upload the different layouts below.<\/p>\n<\/div>\n<div class=\"file-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Mobile focused designs <\/label><\/p>\n<div class=\"file-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-upload btn-icon\"><\/i> File will be uploaded here <\/button><\/div>\n<\/div>\n<\/div>\n<div class=\"file-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Tablet focused designs <\/label><\/p>\n<div class=\"file-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-upload btn-icon\"><\/i> File will be uploaded here <\/button><\/div>\n<\/div>\n<\/div>\n<div class=\"file-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Desktop focused designs <\/label><\/p>\n<div class=\"file-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-upload btn-icon\"><\/i> File will be uploaded here <\/button><\/div>\n<\/div>\n<\/div>\n<div class=\"text-content\">\n<p>Use the email widget below to send these files to any other key stakeholders who are not participating in this checklist.<\/p>\n<\/div>\n<\/section>\n<section id=\"prepare-the-final-designs\">\n<h2> Prepare the final designs<\/h2>\n<div class=\"text-content\">\n<p>Once the look and feel of the website have been established and the different layouts have been approved, it is possible to begin <strong>finalizing the web design process<\/strong>.&nbsp;<\/p>\n<p>Once you have built the different pages you can either present them to the client in a PDF or you can <strong>create a clickable prototype<\/strong>.&nbsp;<\/p>\n<p>You can use a platform like <a href=\"https:\/\/www.invisionapp.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Invision<\/a> to turn your designs into clickable prototypes which can allow your client to experience the product in action.&nbsp;<\/p>\n<p>Using Invision, the client can leave comments on each screen and can understand the user flows. This detail can help allow for any last minute tweaks to be simple and successful.&nbsp;<\/p>\n<p>Either <strong>use the form field below<\/strong> to upload a PDF or <strong>use the web address field<\/strong> to link the Invision prototype.<\/p>\n<\/div>\n<div class=\"file-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Upload the final designs here <\/label><\/p>\n<div class=\"file-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-upload btn-icon\"><\/i> File will be uploaded here <\/button><\/div>\n<\/div>\n<\/div>\n<\/section>\n<section id=\"approve-the-final-designs\">\n<h2> Approve the final designs<\/h2>\n<div class=\"text-content\">\n<p>If the final designs are approved, simply click to complete this task.&nbsp;<\/p>\n<p>If there are further comments or amendments to be made, record these in the form field below.<\/p>\n<\/div>\n<div class=\"textarea-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Notes on the designs. <\/label><br \/>\n<textarea placeholder=\"Something will be typed here...\" rows=\"3\" disabled=\"disabled\" class=\"form-control\"><\/textarea><\/div>\n<\/div>\n<\/section>\n<section id=\"deliver-the-final-work\">\n<h2> Deliver the final work<\/h2>\n<div class=\"text-content\">\n<p>When delivering the final product it is important to understand what format the client hopes to receive the work in.&nbsp;<\/p>\n<p>The best way to pass on the designs would be to <strong>send the Photoshop - or equivalent - files associated with the product<\/strong>. This allows for front end developers to much more easily bring the designs to life.&nbsp;<\/p>\n<p>Upload the final PSDs in the form field below or add a shareable link to another place they can be accessed.&nbsp;<\/p>\n<\/div>\n<div class=\"file-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> PSD files upload <\/label><\/p>\n<div class=\"file-container\">\n    <button type=\"button\" disabled=\"disabled\" class=\"btn btn-default\"> <i class=\"fa fa-upload btn-icon\"><\/i> File will be uploaded here <\/button><\/div>\n<\/div>\n<\/div>\n<div class=\"text-content\">\n<p>When the client receives these files, use the dropdown form below to confirm this.&nbsp;<\/p>\n<\/div>\n<div class=\"select-field-content form-field-content\">\n<div class=\"form-group\">\n   <label> Have all files been received? <\/label><br \/>\n<select disabled=\"disabled\" class=\"form-control\"><option value=\"An option will be selected here\">An option will be selected here<\/option><\/select><\/div>\n<\/div>\n<\/section>\n<section id=\"generate-invoice\">\n<h2> Generate invoice<\/h2>\n<div class=\"text-content\">\n<p><strong>Congratulations on a successful design project.<\/strong>&nbsp;<\/p>\n<p>The designer can use the <a href=\"https:\/\/www.process.st\/templates\/creating-an-invoice\/\" rel=\"nofollow noopener\" target=\"_blank\">Process Street invoice generator template<\/a> to send their invoice to the client.&nbsp;<\/p>\n<p>This invoice can be<strong> sent automatically from this checklist<\/strong> by clicking to complete the task.&nbsp;<\/p>\n<p>You can use <a href=\"http:\/\/zapier.com\" rel=\"nofollow noopener\" target=\"_blank\">Zapier<\/a> to connect this task in this template to your invoice so that you can automate the sending process.&nbsp;<\/p>\n<p>In Zapier, select \"Make a Zap\" and search for Process Street. It will prompt you to create a trigger - select \"New Task Checked\". It should then prompt you to connect your Process Street account to your Zapier one. You simply follow the link <strong>Settings &amp; API tab of the organization manager&nbsp;<\/strong>on the pop-up.<\/p>\n<\/div>\n<div class=\"image-content\">\n<figure>\n   <a href=\"https:\/\/www.process.st\/templates\/wp-content\/uploads\/2024\/02\/j5G98Jpi8owmb67Sr9JCrQ.png\" alt=\"Generate invoice\" target=\"_blank\" rel=\"noopener\"> <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.process.st\/templates\/wp-content\/uploads\/2024\/02\/j5G98Jpi8owmb67Sr9JCrQ.png\"> <\/a><\/figure>\n<\/div>\n<div class=\"text-content\">\n<p>Follow the steps provided by Zapier and it should connect the two accounts together. From here it will let you search for the template you want to run the Zap from, and choose the task you want to hook it up to.&nbsp;<\/p>\n<\/div>\n<div class=\"image-content\">\n<figure>\n   <a href=\"https:\/\/www.process.st\/templates\/wp-content\/uploads\/2024\/02\/rQLtELsKYP4qSOqPjfNOCA.png\" alt=\"Generate invoice\" target=\"_blank\" rel=\"noopener\"> <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.process.st\/templates\/wp-content\/uploads\/2024\/02\/rQLtELsKYP4qSOqPjfNOCA.png\"> <\/a><\/figure>\n<\/div>\n<div class=\"text-content\">\n<p>After you've selected those options you can test that step and <strong>your trigger should be set.&nbsp;<\/strong><\/p>\n<p>Next, you can create the action to be initiated by your trigger. You can use a third party system like <strong>WebMerge or you can use Zapier's built-in email service<\/strong> to generate HTML emails. Either of these solutions can be used to generate and send your invoice.<\/p>\n<p>To read more about these steps and how to create the invoice <a href=\"https:\/\/www.process.st\/invoice-generator\/\" rel=\"nofollow noopener\" target=\"_blank\">check out this article<\/a>.&nbsp;<\/p>\n<\/div>\n<\/section>\n<section id=\"related-checklists\">\n<h2> Related Checklists:<\/h2>\n<div class=\"text-content\">\n<ul>\n<li><a href=\"https:\/\/www.process.st\/templates\/web-design-process\" rel=\"nofollow\">Web Design Process<\/a><\/li>\n<li><a href=\"https:\/\/www.process.st\/templates\/ux-design-process\" rel=\"nofollow\">UX Design Process<\/a><\/li>\n<li><a href=\"https:\/\/www.process.st\/templates\/brand-identity-design\" rel=\"nofollow\">Brand Identity Design<\/a><\/li>\n<li><a href=\"https:\/\/www.process.st\/templates\/header-design-process\" rel=\"nofollow\">Header Design<\/a><\/li>\n<li><a href=\"https:\/\/www.process.st\/templates\/engineering-design-process\" rel=\"nofollow\">Engineering Design Process<\/a><\/li>\n<li><a href=\"https:\/\/www.process.st\/templates\/graphic-design-process\" rel=\"nofollow\">Graphic Design Process<\/a><\/li>\n<li><a href=\"https:\/\/www.process.st\/templates\/logo-design-process\" rel=\"nofollow\">Logo Design Process<\/a><\/li>\n<\/ul>\n<\/div>\n<\/section>\n<section id=\"sources\">\n<h2> Sources:<\/h2>\n<div class=\"text-content\">\n<ul>\n<li><a href=\"http:\/\/www.printmag.com\/featured\/phases-of-the-web-design-process\/\" rel=\"nofollow noopener\" target=\"_blank\">8 Phases of the Web Design Process - Print Magazine<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2011\/06\/following-a-web-design-process\/\" rel=\"nofollow noopener\" target=\"_blank\">Following A Web Design Process \u2013 Smashing Magazine<\/a><\/li>\n<li><a href=\"https:\/\/webflow.com\/blog\/the-web-design-process-in-7-simple-steps\" rel=\"nofollow noopener\" target=\"_blank\">The web design process in 7 simple steps - Webflow Blog<\/a><\/li>\n<li><a href=\"http:\/\/www.leemunroe.com\/web-design-process\/\" rel=\"nofollow noopener\" target=\"_blank\">The Web Design Process Start to Finish - Lee Munroe<\/a><\/li>\n<li><a href=\"https:\/\/www.webdesignerdepot.com\/...\/the-practical-guide-to-web-design-workflow\/\" rel=\"nofollow noopener\" target=\"_blank\">The practical guide to web design workflow - Webdesigner Depot<\/a><\/li>\n<\/ul>\n<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Introduction to Web Design Process Web Design Process Web Design Process Purpose The purpose of the web design process detailed in this template is to provide a common space for the designer and the client to work through the project.&nbsp; Throughout this checklist, you will be presented with form fields and file uploads. Utilizing these [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":11013,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"ep_exclude_from_search":false,"cover_icon_emoji":"","cover_icon_url":"","tasks_count":"15","template_description":"Run this checklist for a designer and client to collaborate easily throughout the web design process.","template_id":"px9XDgsIHY-7Ezf3NPRMKA","task_0":"Introduction to Web Design Process","task_slug_0":"introduction-to-web-design-process","task_1":"Record client details","task_slug_1":"record-client-details","task_2":"Hold initial briefing meeting","task_slug_2":"hold-initial-briefing-meeting","task_3":"Prepare a project charter","task_slug_3":"prepare-a-project-charter","task_4":"Finalize contracts so that work can begin","task_slug_4":"finalize-contracts-so-that-work-can-begin","task_5":"Formulate the structure of the website","task_slug_5":"formulate-the-structure-of-the-website","task_6":"Design initial mockups","task_slug_6":"design-initial-mockups","task_7":"Host a meeting to discuss the mockups","task_slug_7":"host-a-meeting-to-discuss-the-mockups","task_8":"Begin to draw up refined designs","task_slug_8":"begin-to-draw-up-refined-designs","task_9":"Prepare the final designs","task_slug_9":"prepare-the-final-designs","task_10":"Approve the final designs","task_slug_10":"approve-the-final-designs","task_11":"Deliver the final work","task_slug_11":"deliver-the-final-work","task_12":"Generate invoice","task_slug_12":"generate-invoice","task_13":"Related Checklists:","task_slug_13":"related-checklists","task_14":"Sources:","task_slug_14":"sources","task_15":"","task_slug_15":"","task_16":"","task_slug_16":"","task_17":"","task_slug_17":"","task_18":"","task_slug_18":"","task_19":"","task_slug_19":"","task_20":"","task_slug_20":"","task_21":"","task_slug_21":"","task_22":"","task_slug_22":"","task_23":"","task_slug_23":"","task_24":"","task_slug_24":"","task_25":"","task_slug_25":"","task_26":"","task_slug_26":"","task_27":"","task_slug_27":"","task_28":"","task_slug_28":"","task_29":"","task_slug_29":"","task_30":"","task_slug_30":"","task_31":"","task_slug_31":"","task_32":"","task_slug_32":"","task_33":"","task_slug_33":"","task_34":"","task_slug_34":"","task_35":"","task_slug_35":"","task_36":"","task_slug_36":"","task_37":"","task_slug_37":"","task_38":"","task_slug_38":"","task_39":"","task_slug_39":"","task_40":"","task_slug_40":"","task_41":"","task_slug_41":"","task_42":"","task_slug_42":"","task_43":"","task_slug_43":"","task_44":"","task_slug_44":"","task_45":"","task_slug_45":"","task_46":"","task_slug_46":"","task_47":"","task_slug_47":"","task_48":"","task_slug_48":"","task_49":"","task_slug_49":"","task_50":"","task_slug_50":"","task_51":"","task_slug_51":"","task_52":"","task_slug_52":"","task_53":"","task_slug_53":"","task_54":"","task_slug_54":"","task_55":"","task_slug_55":"","task_56":"","task_slug_56":"","task_57":"","task_slug_57":"","task_58":"","task_slug_58":"","task_59":"","task_slug_59":"","task_60":"","task_slug_60":"","task_61":"","task_slug_61":"","task_62":"","task_slug_62":"","task_63":"","task_slug_63":"","task_64":"","task_slug_64":"","task_65":"","task_slug_65":"","task_66":"","task_slug_66":"","task_67":"","task_slug_67":"","task_68":"","task_slug_68":"","task_69":"","task_slug_69":"","task_70":"","task_slug_70":"","task_71":"","task_slug_71":"","task_72":"","task_slug_72":"","task_73":"","task_slug_73":"","task_74":"","task_slug_74":"","task_75":"","task_slug_75":"","task_76":"","task_slug_76":"","task_77":"","task_slug_77":"","task_78":"","task_slug_78":"","task_79":"","task_slug_79":"","task_80":"","task_slug_80":"","task_81":"","task_slug_81":"","task_82":"","task_slug_82":"","task_83":"","task_slug_83":"","task_84":"","task_slug_84":"","task_85":"","task_slug_85":"","task_86":"","task_slug_86":"","task_87":"","task_slug_87":"","task_88":"","task_slug_88":"","task_89":"","task_slug_89":"","task_90":"","task_slug_90":"","task_91":"","task_slug_91":"","task_92":"","task_slug_92":"","task_93":"","task_slug_93":"","task_94":"","task_slug_94":"","task_95":"","task_slug_95":"","task_96":"","task_slug_96":"","task_97":"","task_slug_97":"","task_98":"","task_slug_98":"","task_99":"","task_slug_99":"","footnotes":""},"categories":[40,5],"tags":[],"class_list":["post-11012","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-featured"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/posts\/11012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/comments?post=11012"}],"version-history":[{"count":0,"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/posts\/11012\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/media\/11013"}],"wp:attachment":[{"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/media?parent=11012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/categories?post=11012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.process.st\/templates\/wp-json\/wp\/v2\/tags?post=11012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}