He Houru’s Report

I was responsible for the website design in this project. I used Elementor to design the main structure of the website.

After communicating with the team, I divided the website into five main parts: Home, Introduction, About us, Media, and Contact. I think there is no need for too much complicated design, and it is enough to simply express the content of our project.This part was finalized on June 20th.

This public welfare project aims to raise public awareness of food waste in Singapore and promote a lifestyle that reduces waste and values food. As a key vehicle for promotion and information dissemination, websites need to balance aesthetics with effective information delivery.

As the web design manager, my main responsibilities include:

1.Structural planning

Determine the single-page vertical scrolling structure based on project requirements

Project theme and slogan

Project background and purpose statement

Team Member Introduction

Event time and contact information

2.Visual Design

Determine the overall color scheme, with a focus on blue-green tones (#0E83B2, #56ADB8, #5BC4C0, #EAE4DA), to convey the concepts of environmental protection and nature. This is the logo of our project’s affiliated company, which aligns perfectly with the purpose of this project.

At first, I only created the framework of the website without using any artistic resources. Starting from July 15th, I began to use materials to decorate my pages.

To this end, I designed a simple and modern page layout to enhance reading comfort and visual appeal.

Create web materials such as gradient backgrounds, marble texture backgrounds.

I believe that using this minimalist element as the background for our webpage is very harmonious and perfectly fits the theme of environmental protection.

3.Content presentation

Combine the theme of public welfare with illustrations and images related to ‘food saving’ and ‘environmental sustainability’.

Optimize the layout of text content to ensure that the information is conveyed clearly.

4.Web Implementation and Optimization

Considering that our webpage cannot only appear on computers, in order to promote our activities, it may apply to more scenarios, such as mobile devices.

So at the beginning of August, I began to adapt the webpage for mobile devices.

Using responsive design to ensure that the page displays well on both computers and mobile devices.

Compressing and optimizing image resources to improve webpage loading speed.

This is how the webpage performs on the iPad.
This is how the page looks on a mobile phone.

Of course, the website presented now is the solution determined after many attempts.

Previously, I have also created multiple versions of the webpage.

This video is my first attempt, recorded while I was creating a single-page website. At that time, I envisioned having all the content concentrated on one page, with navigation through a menu, but later I realized we had a lot of content, so the final product ended up being on multiple pages.

Although it is a pity that these plans were not adopted, I am also very happy because these experiences are also part of my growth in life.

I have learned a lot from exploring again and again, and I have benefited a lot.

I hope that after successfully launching the official website of the charity project, we can effectively convey the concept of reducing food waste.

I also hope to receive positive feedback from my team and visitors, and that the web pages I design will be recognized for their visual and usability.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top