Stage 1: Pencil Wireframes
Initial wireframes exploring layout structure and content hierarchy.
Focused on overall structure rather than colour or visual detail.

Stage 2:Rough Digital Layout
A low-fidelity digital wireframe created in Figma to translate the paper sketches into a structured layout.
This stage focuses on layout, spacing, and content placement.


Stage 3: Final Design
A refined high-fidelity layout for the Eco Future homepage.
The design applies consistent typography, spacing, and visual hierarchy,
preparing the layout for future branding and content development.

This final page design takes eco future’s environmental protection concept as the core, and the goal is to provide a clear, friendly and action oriented digital interface for young users and home users who are concerned about sustainable lifestyles.
In terms of target users, this design is mainly for ordinary users who are interested in environmental protection, energy conservation and green life, but do not necessarily have professional background. Therefore, the overall visual language remains simple and intuitive, avoids information overload, and helps users quickly understand the core values and service contents of the brand through a clear hierarchical structure.
From the perspective of UI (user interface) design, the page adopts a clear modular layout, including the top brand identification area, hero image area, about/mission information area and service display area. The unified green main tone strengthens the environmental protection attribute of the brand. At the same time, it is combined with natural theme pictures to enhance visual consistency and brand recognition. The font selection is clear and easy to read, ensuring good readability in different screen sizes.
Leave a Reply