{"id":15373,"date":"2026-09-07T12:48:14","date_gmt":"2026-09-07T12:48:14","guid":{"rendered":"https:\/\/www.airsang.com\/?p=15373"},"modified":"2026-10-17T16:19:47","modified_gmt":"2026-10-17T16:19:47","slug":"how-to-write-a-website-design-brief-for-your-agency","status":"publish","type":"post","link":"https:\/\/www.airsang.com\/es\/how-to-write-a-website-design-brief-for-your-agency\/","title":{"rendered":"How to Write a Website Design Brief for Your Agency"},"content":{"rendered":"<p> one serving <a href=\"https:\/\/www.airsang.com\/es\/how-website-redesign-pricing-works-scope-migration-risks-and-acceptance-checks\/\"> Website design proposal <\/a> First of all, you need to answer: Who is the website for, what actions do you want visitors to complete, what pages and information are needed, and who can make the final decision. By making these inputs clear, the design team has a basis for planning structure and vision; unknown items are marked as &#8220;to be discussed.&#8221; <\/p>\n<h2> Write your goals first, rather than picking a template first <\/h2>\n<p> &#8220;Building a high-end official website&#8221; is not an executable requirement. A more useful way to write it is: &#8220;For overseas purchasing managers, introduce three types of products and allow visitors to submit customer inquiries; provide English content in the first issue.&#8221; It is also a website. Different readers, markets and main actions will affect the focus, navigation, content priority and form fields of the homepage. When starting the project, determine the initial goals first to avoid cramming all the features that may be needed in the future into the first version. <\/p>\n<h3> Unify project understanding with one-page overview <\/h3>\n<p> It is recommended to fill in the business type, main products or services, target customers, target country and language, main tasks of the website, existing website address and project contact person at the beginning of the proposal. If the team has different expectations for &#8220;customer inquiry&#8221;, &#8220;online ordering&#8221; and &#8220;appointment&#8221;, first determine a primary action and list the rest as secondary actions. Also identify content providers and approvers. <\/p>\n<p> For example, a company that provides industrial parts can write: &#8220;The first English official website mainly serves North American procurement; the homepage guides you to view the product series and submit drawings for customer inquiry. The sales manager confirms the product information, and the brand person in charge approves the design.&#8221; This is a teaching example. <\/p>\n<h2> Submit the page list and content materials to the design company <\/h2>\n<p> Don\u2019t just say \u201cneed a homepage and a few inner pages.\u201d Start by listing the page name, target readers, page tasks, existing copy, available images, and gaps. Common projects can start from the homepage, product or service category page, product detail page, about us, cases, contact page, and then add downloads, FAQ or policy pages according to actual business. Shopify <a href=\"https:\/\/help.shopify.com\/en\/partners\/manage-clients-stores\/store-setup-basics\" target=\"_blank\" rel=\"noopener\"> Partner store setup instructions <\/a> Customer vision, product information, brand pages and pictures are also listed as matters that need to be communicated before building a store; this is a reference for e-commerce scenarios and is not a fixed number of pages for all corporate websites. <\/p>\n<h3> Answer at least three questions on each page <\/h3>\n<p> First, who will watch it; second, what should be understood after reading it; third, what to do next. What the homepage needs is business focus and credible evidence, not all the information listed side by side. The product page allows readers to identify models, uses, differences and contact paths. Navigation hierarchy should also be derived first from content relationships. <a href=\"https:\/\/developers.google.com\/search\/docs\/specialty\/ecommerce\/help-google-understand-your-ecommerce-site-structure\" target=\"_blank\" rel=\"noopener\"> Google&#8217;s documentation on e-commerce website structure <\/a> Note that menus and links between pages help to understand the relationship between pages, so the page list should also indicate the category and superior-subordinate relationship. <\/p>\n<p> Put the existing copy, product sheets, photos and videos into the shared folder by page, and mark it as &#8220;can be used directly\/needs modification\/not yet provided&#8221;. If the material belongs to the photographer, platform provider or customer, confirm the website usage permissions and display range. Images without authorization should not be included in the design draft by default. For content that has not yet been completed, you can first give the design company the key points of information and the expected submission date. <\/p>\n<figure class=\"wp-block-image size-full\" style=\"margin:28px 0\"><img loading=\"lazy\" src=\"https:\/\/www.airsang.com\/wp-content\/uploads\/airsang-posts\/3eebf78061742ff8b43498a2.webp\" alt=\"Schematic diagram of the page relationship and material preparation status of the home page, product category and product detail page\" width=\"1200\" height=\"800\" class=\"\" decoding=\"async\" style=\"display:block;width:100%;height:auto;border-radius:10px\"><figcaption style=\"font-size:14px;line-height:1.7;margin-top:10px\"> Editing instructions: page map and material status <\/figcaption><\/figure>\n<h2> Products, brands and functions: fill in according to business needs <\/h2>\n<h3> Product information must be able to support the page structure <\/h3>\n<p> E-commerce or product-based websites usually require product name, category, main selling points, specifications, pictures and necessary variation information. If you want to sell directly, you also need to clarify your pricing, inventory, delivery, and return and exchange policies. <a href=\"https:\/\/woocommerce.com\/document\/managing-products\/add-product\/\" target=\"_blank\" rel=\"noopener\"> WooCommerce Official Product Documentation <\/a> It explains that basic products can start from the product name and price, and also introduces subsequent information such as pictures; it illustrates examples of platform fields, and it cannot be inferred that all websites must trade online. When there is no electronic version of the product table, first select a representative product and fill in the information completely for the design team to verify the information level of the product detail page. <\/p>\n<p> Have a source file of your brand logo, standard colors, commercially available fonts or font licenses, a description of your brand, examples of tone of voice, and design references that clarify your likes and dislikes. It is best to write down specific reasons for the reference website, such as &#8220;product categories are visible at a glance&#8221; and &#8220;button copy is clear&#8221; rather than asking to copy the page. In the absence of a formal VI, indicate which colors or expressions must be retained and which can be proposed by the design team. <\/p>\n<figure class=\"wp-block-image size-full\" style=\"margin:28px 0\"><img loading=\"lazy\" src=\"https:\/\/www.airsang.com\/wp-content\/uploads\/airsang-posts\/00ee55462906f921a32f80ef.webp\" alt=\"A schematic diagram of the product information package and brand information package that should be compiled before submission to the design company\" width=\"1200\" height=\"800\" class=\"\" decoding=\"async\" style=\"display:block;width:100%;height:auto;border-radius:10px\"><figcaption style=\"font-size:14px;line-height:1.7;margin-top:10px\"> Editor\u2019s note: Product information package and brand information package <\/figcaption><\/figure>\n<h3> Functional requirements are written as visitor actions <\/h3>\n<p> Rewrite &#8220;requires advanced features&#8221; into testable scenarios: which customer inquiry fields are filled in by visitors, whether attachments are required, and to whom the message is sent; if there is a shopping cart, which regions, currencies and delivery methods are supported; if it is multi-lingual, who is responsible for translation and subsequent updates. Forms, online payments, memberships, and logistics inquiries are not required for every project. First, differentiate between what is necessary in the first phase, what may be added in the future, and what is clearly not required, so that the design company can come up with page and interaction plans based on the real process. <\/p>\n<h2> Write the approval and handover methods into the plan <\/h2>\n<p> Not having enough information can still slow down a project because decision-making is fragmented. Agree on a requirements person in charge to collect opinions, and a final approver to confirm key nodes; at the same time, list what participants such as product, market, and legal affairs will review respectively. The design company should receive one consolidated feedback rather than multiple conflicting revisions. <\/p>\n<p> When handing over, label each piece of material with the version, person in charge, and status. List the questions that need to be asked by the design team individually, don&#8217;t fill in the blanks with guesswork. If the business goal or page scope later changes, the change, reason, and approver should be documented in the same document. Discuss this way <a href=\"https:\/\/airsang.cn\/%e4%ba%a7%e5%93%81%e4%b8%8a%e6%9e%b6%e6%9c%8d%e5%8a%a1\/\" target=\"_blank\" rel=\"noopener\"> Product information organization <\/a> Or during subsequent development work, both parties can find the same basis. <\/p>\n<figure class=\"wp-block-image size-full\" style=\"margin:28px 0\"><img loading=\"lazy\" src=\"https:\/\/www.airsang.com\/wp-content\/uploads\/airsang-posts\/6a50862cb41c949673b53508.webp\" alt=\"Schematic diagram of the person in charge of the requirements, data status and approval handover of the website design project\" width=\"1200\" height=\"800\" class=\"\" decoding=\"async\" style=\"display:block;width:100%;height:auto;border-radius:10px\"><figcaption style=\"font-size:14px;line-height:1.7;margin-top:10px\"> Editor\u2019s Note: Requirements Handover and Approval Records <\/figcaption><\/figure>\n<h2> Directly fillable website design requirement form <\/h2>\n<p> The following is an edited teaching template. Replace the examples with your own information; fill in &#8220;To be discussed&#8221; for items you don&#8217;t know and designate the person in charge. It is used to initiate requirements communication and does not represent the final technical solution. <\/p>\n<div style=\"max-width:100%;overflow-x:auto;\">\n<table style=\"width:100%;min-width:700px;border-collapse:collapse;line-height:1.6;\">\n<caption style=\"text-align:left;padding:10px 0;font-weight:700;\"> Website design proposal: example of requirement input and data handover <\/caption>\n<thead>\n<tr style=\"background:#26313A;color:#fff;\">\n<th scope=\"col\" style=\"border:1px solid #CBD5DF;padding:12px;text-align:left;\"> Field <\/th>\n<th scope=\"col\" style=\"border:1px solid #CBD5DF;padding:12px;text-align:left;\"> Fill in examples (teaching instructions) <\/th>\n<th scope=\"col\" style=\"border:1px solid #CBD5DF;padding:12px;text-align:left;\"> person in charge <\/th>\n<th scope=\"col\" style=\"border:1px solid #CBD5DF;padding:12px;text-align:left;\"> Data status <\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th scope=\"row\" style=\"border:1px solid #CBD5DF;padding:12px;background:#FFF5E7;text-align:left;\"> Goals and Audiences <\/th>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> English market purchasing manager; mainly customer inquiry <\/td>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> Marketing manager <\/td>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> To be confirmed <\/td>\n<\/tr>\n<tr>\n<th scope=\"row\" style=\"border:1px solid #CBD5DF;padding:12px;background:#FFF5E7;text-align:left;\"> Pages and Navigation <\/th>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> Home page, three categories of products, about us, contact <\/td>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> Marketing manager <\/td>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> Already have a first draft <\/td>\n<\/tr>\n<tr>\n<th scope=\"row\" style=\"border:1px solid #CBD5DF;padding:12px;background:#FFF5E7;text-align:left;\"> Products and pictures <\/th>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> Product table, main product image, specifications and usage rights <\/td>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> product manager <\/td>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> Partially missing <\/td>\n<\/tr>\n<tr>\n<th scope=\"row\" style=\"border:1px solid #CBD5DF;padding:12px;background:#FFF5E7;text-align:left;\"> Brand materials <\/th>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> Logo source files, color values, font licensing <\/td>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> Brand person in charge <\/td>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> Prepared <\/td>\n<\/tr>\n<tr>\n<th scope=\"row\" style=\"border:1px solid #CBD5DF;padding:12px;background:#FFF5E7;text-align:left;\"> main action <\/th>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> Submit customer inquiry and upload drawings; receiving email is to be determined <\/td>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> sales manager <\/td>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> To be discussed <\/td>\n<\/tr>\n<tr>\n<th scope=\"row\" style=\"border:1px solid #CBD5DF;padding:12px;background:#FFF5E7;text-align:left;\"> Approval and feedback <\/th>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> Market summary feedback; general manager confirms key design <\/td>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> Project leader <\/td>\n<td style=\"border:1px solid #CBD5DF;padding:12px;\"> To be confirmed <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p> Before handing it over to the design company, check again whether the &#8220;to be discussed&#8221; in the form has the person in charge and the date of discussion. Include links or file names for page lists, existing assets, and design references; don\u2019t just explain them verbally in meetings. If the project involves multiple sites or languages, list what can be shared and what needs to be written separately. <\/p>\n<h2> Conclusi\u00f3n <\/h2>\n<p> The core of a useful website design proposal is to allow the design company to see the business goals, target customers, pages and content, necessary functions and decision-making methods. First use a one-page overview to determine the direction, and then use a demand table to mark existing information and gaps; temporarily uncertain projects will be brought to the communication meeting by the person in charge for resolution. Once you have these inputs ready, you can bring the document with you to discuss page scope and content priorities with AIRSANG without having to decide on each technology implementation for the design team first. <\/p>","protected":false},"excerpt":{"rendered":"<p> Are you ready to commission a design company for website development? Organize the website design proposal according to brand positioning, target customers, page list, product information, functions, and approval process, and attach a directly fillable demand handover form. <\/p>","protected":false},"author":1,"featured_media":13752,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[105],"tags":[],"class_list":["post-15373","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources"],"_links":{"self":[{"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/posts\/15373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/comments?post=15373"}],"version-history":[{"count":1,"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/posts\/15373\/revisions"}],"predecessor-version":[{"id":15517,"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/posts\/15373\/revisions\/15517"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/media\/13752"}],"wp:attachment":[{"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/media?parent=15373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/categories?post=15373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.airsang.com\/es\/wp-json\/wp\/v2\/tags?post=15373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}