Project overview

In ZHONGFU’s WordPress website, we organize pages around “Sports Scenes and Fabric Selection”. We first use sports and outdoor scenes to explain the use direction of fabrics, and then expand according to functions and specific products, so that application awareness and material verification are connected with each other. Through concise sans serif titles, sports scene diagrams, functional groupings and clear grids, the brand theme, specific content and follow-up communication are arranged at different levels, allowing visitors to continue to understand the project along a clear path.

design challenge

We need to give the functional fabrics website a place for brand expression and specific information. Focusing on sports scenes and fabric selection, the page should not only explain the content direction, but also allow visitors to find the next step. We arranged the overall theme, subdivided content and communication areas in layers to prevent different tasks from being crowded on the same screen.

Design strategy: sports scene and fabric selection

Explain the topic first, then go into the specific content

We first use sports and outdoor scenes to explain the use direction of fabrics, and then expand according to functions and specific products, so that application awareness and material verification are connected with each other. The home page uses scenes such as running, cycling, and hiking as the entrance, and the fabrics are explained below according to the direction of light weight, function, and protection; we present uses and material properties in layers.

Connect pages with fonts, colors, and white space

The clear sans-serif fonts in the page style provide the font foundation for titles and text; we establish hierarchy through font size, weight, and paragraph width. Simple sans-serif titles, action scenes, functional groupings, and clear grids are used throughout the main page, with wide spacing between columns and tighter spacing between images and descriptions within the same information group.

Make the entrance close to the current reading task

We have arranged the table of contents, detailed instructions and contact entries in their own page context. When browsing, scroll through the page to expand the content section by section, and navigation links connect different pages; the entry copy and location jointly explain the next step, keeping reading and operation connected.

Home page: Sports scenes and fabric selection

We first use sports and outdoor scenes to explain the use direction of fabrics, and then expand according to functions and specific products, so that application awareness and material verification are connected with each other.

This screen establishes identity with a simple sans-serif title, a moving scene graphic, functional groupings and a clear grid. Thematic text is kept adjacent to the main entrance, and pictures, titles, and supplementary descriptions are separated by scale and spacing to keep the first layer of information focused.

Home page content: Organize different topics separately

Our homepage uses scenes such as running, cycling, and hiking as the entrance. Below, we explain the fabrics according to the direction of light weight, function, and protection; we present uses and material properties in layers.

We use module boundaries and image and text alignment to establish a reading order: the content within the group is kept compact, and pauses are maintained between groups to make the direction of column switching and continued browsing clear and discernible.

Product Classification: Establish a clear comparative order for the catalog

On our category page, we first mark the purpose with “Yoga” and then put the current fabric into the product area. Pictures, names and entries are concentrated in the same card, and the spacing between sorting and entries is preserved to provide a clear starting point for subsequent selection.

This page follows the simple sans-serif heading, action scene diagram, functional grouping, and clear grid. We use the difference in word weight between the title and the main text to indicate the priority, connect the same group of information with an alignment relationship, and distinguish different tasks through white space to maintain visual continuity across pages.

Product Details: Keep images adjacent to product information

Our fabric details reserve the main area for the material image, and the relevant name and specification information are concentrated on the side; the image presents the texture, and the text undertakes specific material verification.

This page follows the simple sans-serif heading, action scene diagram, functional grouping, and clear grid. We use the difference in word weight between the title and the main text to indicate the priority, connect the same group of information with an alignment relationship, and distinguish different tasks through white space to maintain visual continuity across pages.

Details: Continue the checking sequence of single product information

We keep product descriptions, supplementary images, and related content continuing along the page. The information in the current screen is organized around the same product, and the main information and auxiliary content are distinguished by their respective areas.

Longer descriptions are grouped using subtitles and paragraph spacing, with space for images and text; the same text level connects the product information above, so that reading downwards does not have to readjust to another layout.

Brand introduction: Supplementary brand and team background

Our brand introduction page supplements the business background of the fabric company. The grouping of images and text continues the rational style of the homepage, allowing the catalog to form a connection with the company description.

This page follows the simple sans-serif heading, action scene diagram, functional grouping, and clear grid. We use the difference in word weight between the title and the main text to indicate the priority, connect the same group of information with an alignment relationship, and distinguish different tasks through white space to maintain visual continuity across pages.

Contact page: Give communication information a clear place

Our contact page organizes communication information and related areas into independent modules to facilitate visitors to further inquire with usage and fabric needs.

This page follows the simple sans-serif heading, action scene diagram, functional grouping, and clear grid. We use the difference in word weight between the title and the main text to indicate the priority, connect the same group of information with an alignment relationship, and distinguish different tasks through white space to maintain visual continuity across pages.

Mobile homepage: reallocate space according to narrow screen

On mobile, we expand the images, titles, and descriptions on the homepage to the currently available width. The image retains the brand identity and the actual content of the corresponding page, and is arranged vertically so that each set of information has an independent reading area.

We maintain hierarchy through title wrapping, image scale, and white space between groups, so that the main content is seen first, and subsequent instructions appear in order; the top navigation is transformed into an entry form suitable for narrow screens, continuing the color and text language of the desktop.

Mobile phone product details: reallocate space according to narrow screen

On mobile, we expand the images, titles, and descriptions in product details to the currently available width. The image retains the brand identity and the actual content of the corresponding page, and is arranged vertically so that each set of information has an independent reading area.

We maintain hierarchy through title wrapping, image scale, and white space between groups, so that the main content is seen first, and subsequent instructions appear in order; the top navigation is transformed into an entry form suitable for narrow screens, continuing the color and text language of the desktop.

Design summary: Let different pages unfold around the same path

In ZHONGFU’s website, we use sports scenes and fabric selection as clues for content organization, and use concise sans-serif titles, sports scene pictures, functional groupings, and clear grids to connect different pages. The home page establishes direction, the inner pages carry specific information, and the mobile layout continues to retain the same reading level, allowing brand identification and business content to remain consistent.

Plan a clear WordPress website for your brand

You can provide us with your existing website address, brand materials and required page range, and together we can sort out the content, visuals and functions suitable for your business.