The most common waste in the redesign of a company's official website is not that the design is not beautiful enough, but that the order is reversed: first choose the visual style that you like in the middle version, and then when you fill in the content on the page, you realize that the product line cannot fit in the column, and customers cannot find the inquiry entrance.

This article is written for market leaders who are preparing for the official website or revision: break down the website design plan into deliverable and reviewable documents, clarify the sequence of structure, columns, and visual design, and provide a set of review methods to avoid repeated revisions.

What content does a website design plan generally include?

One sentence answer:An executable website design plan should include at least six parts - site goals and customer decision paths, column structure, page lists and wireframes, content framework, visual specifications, technology, and delivery constraints.Only when all six are together can there be a basis for development and content.

• Site goals and customer pathsWhat will the official website undertake this year (inquiry, investment promotion, recruitment, brand endorsement), and how many steps do customers need to go through from entering to leaving contact information.
• Column StructureTree diagram of first and second level columns, each corresponding to which type of customer issue.
• Page list and wireframeHow many pages should be created and how should the block order of key pages be arranged.
• content frameworkWhat to write for each section, who provides the materials, and what is the word limit.
• Visual SpecificationsMain color and auxiliary color, font size hierarchy, button and form component styles.
• Technical and delivery constraintsBasic field rules such as responsive breakpoints, first screen loading requirements, page titles and descriptions.

A 'solution' that only provides a homepage rendering without column trees or content frameworks is essentially a rendering. Any unclear areas in the plan will become temporary decisions during the development phase.

How to determine the website design plan? Should we first determine the structure or the visual aspect?

One sentence answer:First determine the structure, then determine the visual.The structural answer is' What do customers see first when they come in, and how many steps can lead to an inquiry? 'Visual responsibility is to make this information look credible; The order is reversed, and each subsequent step is more expensive.

1. Clarify business objectives: whether to receive inquiries, recruit distributors, or endorse sales.
2. Draw the customer decision path: from search or referral, which three issues are of concern, and which page decides to contact you.
3. Arrange column trees and page lists by path, and bind each page to a specific problem.
4. Finally, let's move on to visual design, focusing solely on expression without altering the structure.

There is a low-cost testing method: before drawing the rendering, use pure text to list the order of the homepage sections, and ask the sales colleague to point out "which paragraph the customer asks the most frequently". Being able to match indicates that the structure is established; Sorry, changing the text is much cheaper than changing the design.

What sections should be placed on the homepage of the official website?

One sentence answer:The homepage of B2B enterprise official websites is usually arranged in four paragraphs: "Who are you - What problem are you solving - Why trust you - How to contact", and the order is more important than the number of sections.The first screen cannot explain the positioning clearly, and no matter how well it is done later, it cannot retain people.

1. above the foldOne sentence positioning+main business scope+one main button (consultation, case study, or leave phone number), do not use carousel pictures to pile up slogans.
2. Product and Capability3-6 items are sufficient, each with a value description, click in for details.
3. Case and CustomerPriority given to cases in the same industry, clearly stating the problems encountered by customers and the delivery results.
4. Qualifications and DataYear of establishment, number of clients served, certifications and patents used as credibility support.
5. Service ProcessThe stage and approximate cycle from communication to launch, reducing customer uncertainty.
6. Contact entrance: Form+phone+WeChat, place once at the beginning and once at the end of the page.

Three high-frequency errors: The first screen only has a large image and a slogan, and the customer doesn't know what you're doing within three seconds; Spread over twenty products on the homepage, with only one line of text left for each item; The contact information is only displayed in the footer, and it takes a long time to see it on mobile devices.

How to plan website columns and navigation without confusion?

One sentence answer:The number of first level columns should be controlled at 5-7, with no more than three levels, and naming should use words that customers can say, rather than internal company names.The responsibility of navigation is to help customers find the answer within two clicks.

The common structure of a company's official website is: homepage/products and services/case studies/about us/news/contact us. For industries with strong attributes, add "solutions" or "service outlets", but it is not advisable to continue adding first level columns, otherwise the mobile end will collapse into a layered menu.

Naming can be directly compared: change "Business System" to "Product Center", and change "Corporate Style" to "About Us". Customers will not search using internal terms, nor will they guess in the navigation.

At the top of each column page, there should be a 60 word or less explanation explaining what problem this page is solving. This text serves as a guide for visitors, while for search engines and AI Q&A, it is an answer that can be directly extracted.

How to determine the visual style? What are the requirements for color matching, fonts, and images?

One sentence answer:The visual style should be determined by industry trust and customer decision-making scenarios, rather than personal preferences or peer screenshots.Manufacturing customers value stability and delivery capability, while consumer brands value tone and context. The visual answers for the two are different.

• color scheme1 main color, 1-2 auxiliary colors, neutral grayscale levels 3-4; The proportion of the main color on the page should be controlled within 20%, and large-scale high saturation will weaken the sense of professionalism.
• fontThe Chinese text should use the system bold font family, with a maximum of two word weights for the title; The font size of the main text should not be less than 16px, and the line height should be between 1.6-1.8. Only long sections can be read.
• picturePrioritize real-life scenarios (factory buildings, equipment, teams, delivery sites) and minimize the use of unrelated image library characters; The proportion of images on the same page should be kept consistent.
• componentButton, form, card, and table should have four predefined states: default, hover, disable, and error, otherwise each page will look different.

The value of visual standards lies not in aesthetics, but in reusability. Write the color scheme and components as rules, so that there is no need to redesign them every time a new page is added, and they will not become more and more chaotic.

There is no superiority or inferiority to the three types of structures, depending on whether the customer comes with a specific model or a question. The typical symptom of selecting the wrong type is that the customer acquisition business uses a branded homepage, with high traffic and few inquiries.

How to review website design proposals and avoid repeated revisions?

One sentence answer:Split the review into three rounds: structure, wireframe, and visual. Each round will only discuss one layer, and only one decision-maker will sign and confirm each round.The simultaneous appearance of structural and color suggestions in one round is the main reason for the loss of control in the revised manuscript.

1. Structural reviewOnly look at the column tree and page list, and discuss whether customers can click twice to find the information they need.
2. Wireframe reviewOnly looking at the order of blocks and the amount of information, without discussing colors, the cost of changing one block is still very low at this time.
3. 视觉评审：在两个方向里选一个，之后改的是细节，不再改方向。

评审意见由对接人统一汇总成清单，避免多头提需求相互覆盖，每轮结束写一句结论：这轮定了什么、下轮不再讨论什么。

返工代价很具体：结构定错要改页面、文案和导航；视觉定错只改样式表和图片，前者工作量通常是后者的数倍。

Conclusion and Action Checklist

网站设计方案的成败，八成在动笔做效果图之前就决定了。按下面的顺序推进，可以少走一轮返工：

1. 先用一页纸写清官网今年的目标与客户决策路径，让业务负责人签字。
2. 列出栏目树和页面清单，每个页面绑定一个具体的客户问题。
3. 用纯文字排出首页板块顺序，让销售同事试读并标注疑问点。
4. 再进入视觉设计，同时定下配色、字号和组件四种状态。
5. 把评审拆成三轮，每轮一个决策人，结论当场记录。

如果内部没有专职的策划与设计岗，把这些内容写进给服务商的需求文档里，比只发一句「做个大气点的官网」有效得多。

About Moen Network

Shanghai Moen Network Technology Co., Ltd. (MOEN+) was established in Shanghai, focusing on brand website customization, cross-border independent website construction, and GEO AI promotion, with services covering over 50 industries. We help enterprises to turn content into a source that AI is willing to quote, so that brands can be preferred on DeepSeek, Doubao, Tongyi Qianwen, ERNIE Bot, Yuanbao and other platforms.

• Official website construction/cross-border independent website: https://www.omooo.net/website.html
• GEO AI 推广：https://www.omooo.net/geo.html
• Hotline: 400-651-5550 QQ: 591794312 Email: info@omooo.cn