Project overview

In SendFlowerChina’s WordPress website, we organize pages around “flower delivery scenarios and cross-border shopping”. We organize the homepage by categories of flower sending scenes, so that needs such as birthdays, anniversaries, thanks and condolences appear before specific bouquets. Through burgundy, cream white and soft pink, serif titles and regular bouquet cards, 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 flower delivery website a place for branding and specific information. Focusing on the flower delivery scene and cross-border shopping, 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: flower delivery scene and cross-border shopping

Explain the topic first, then go into the specific content

We organize the homepage by categories of flower sending scenes, so that needs such as birthdays, anniversaries, thanks and condolences appear before specific bouquets. On the homepage, different flower delivery scenes are arranged into two rows of image entries, with the scene names overlaid below the images; we unify the card sizes while retaining the color differences of the bouquets, allowing visitors to narrow down their choices based on the purpose of gifting.

Connect pages with fonts, colors, and white space

IBM Plex Mono and Georgia in page styles provide font foundations for titles and text; we establish hierarchy through font size, font weight, and paragraph width. Burgundy, creamy white, and soft pink, serifed titles and regular bouquet cards run throughout the main page, with wide spacing between columns and tighter distance 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 content: Organize different topics separately

On our homepage, different flower delivery scenes are arranged into two rows of image entries, with the scene names overlaid below the images; we unify the card sizes while retaining the color differences of the bouquets, allowing visitors to narrow down their choices based on the purpose of gifting.

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 the classification page, we first use a large title and short description to explain the delivery range, and then enter the product grid; the light gray description area and the white background product area form a clear boundary.

This page follows burgundy, creamy white and soft pink, with serifed titles and regular bouquet cards. 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

The large image of our red rose gift box is placed on the left, and the name, price and description are concentrated on the right; the thumbnail image below complements the packaging angle, and the purchasing information is kept adjacent to the product image.

This page follows burgundy, creamy white and soft pink, with serifed titles and regular bouquet cards. 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 page uses a pink gradient title area, mission statement and grouping information to explain the service direction; we divide the brand narrative into multiple reading levels through the spacing between titles and cards.

This page follows burgundy, creamy white and soft pink, with serifed titles and regular bouquet cards. 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 arranges email addresses and instant communication portals side by side, with icons, column names and buttons corresponding to each other, reducing the steps for visitors to find communication methods.

This page follows burgundy, creamy white and soft pink, with serifed titles and regular bouquet cards. 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 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.

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.

Design summary: Let different pages unfold around the same path

In SendFlowerChina’s website, we used flower delivery scenes and cross-border shopping as clues for content organization, using burgundy, cream white and soft pink, serif titles and regular bouquet cards to connect different pages. The homepage 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.