Project overview

In the Intelligent Matter Lab’s WordPress site, we organize our pages around “Smart Materials Research and Team Showcase.” We established the academic positioning with the name of the laboratory and research introduction, then used diagrams to illustrate the research direction of smart materials, and then connected the results with the team entrance. Through black background, white text, light green highlights and research diagrams, 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 a place for branding and specific information on the research laboratory website. Focusing on smart material research and team presentation, 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: Smart Materials Research and Team Presentation

Explain the topic first, then go into the specific content

We established the academic positioning with the name of the laboratory and research introduction, then used diagrams to illustrate the research direction of smart materials, and then connected the results with the team entrance. The homepage first uses two columns on the left and right to introduce the research objects and methods of smart materials. The thicker topic sentences and lighter explanatory text divide the work. The loose white space allows the professional content to have a stable reading rhythm.

Connect pages with fonts, colors, and white space

Montserrat in page styles provides the font basis for titles and text; we establish hierarchy through font size, font weight, and paragraph width. A black background, white text, light green highlights, and research diagrams 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: Smart Materials Research and Team Display

We established the academic positioning with the name of the laboratory and research introduction, then used diagrams to illustrate the research direction of smart materials, and then connected the results with the team entrance.

This screen establishes identification with a black background, white text, light green emphasis, and a research diagram. 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 first uses two columns on the left and right to introduce the research objects and methods of smart materials. The thicker topic sentences and lighter explanatory text divide the work. The loose white space allows the professional content to have a stable reading rhythm.

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.

Research Direction: Set the reading level for the research direction

We research pages to keep professional images aligned with directional instructions, and each group of content establishes boundaries through headings and paragraph spacing to avoid consecutive terms forming a wall of text with the same density.

This page continues to use a black background, white text, light green highlights and research diagrams. 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.

Academic achievements: Make achievement entries easily accessible

Our results page consists of entries through paper images, titles and publication information, unifying the location of information and leaving reading space for academic titles of different lengths.

This page continues to use a black background, white text, light green highlights and research diagrams. 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.

Member introduction: present member information item by item

Our team page is mainly based on character images and identity information, with pictures and texts arranged in groups; we leave blank spaces between characters so that member information can be easily reviewed one by one.

This page continues to use a black background, white text, light green highlights and research diagrams. 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 centralizes laboratory communication and location information, using independent headings and content partitions to support the transition from research reading to academic contact.

This page continues to use a black background, white text, light green highlights and research diagrams. 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 research direction: reallocate space according to narrow screen

On mobile, we expand the images, titles, and descriptions in the research direction 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

On the Intelligent Matter Lab website, we use smart materials research and team presentation as clues for content organization, using black background, white text, light green highlights and research diagrams 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.