Coding | Website Design & Development

Full Coding Project

1. Concept

1.1 YIMI Concept


"The taste of hometown is unforgettable."

The "YIMI" brand comes from my hometown: Jilin, China. My hometown is rich in all kinds of grain and grain, as well as a variety of wild animals. For example, hare, boar, sika deer and so on. YIMI is a cultural and creative brand whose design was inspired by a family of five in Jilin province. The family lives by growing food, harmonious and happy. I choose to use a number of creative illustrations to reflect the characteristics of the brand. Related products include postcards, letter paper, jigsaw puzzles, water cups and so on. This set of brand design can let foreigners better understand the characteristics of my hometown, at the same time, let visitors remember here.

1.2 Project Timeline

2. Wireframe

2.1 Product list page

2.2 Single product page

3. Coding

3.1 Code the HTML & CSS

How I code the website

3.2 PHP & MySQL

Work with PHP and MySQL Database

4. Final Work

4.1 Website

5. Brand Style Guide

5.1 Final Logo

Clear Space and Style Guide

5.2 Color

6. Conclusion


This project is a set of original brand design I made for my hometown. The illustrations center around my hometown Changchun, a cold northern city. The protagonists of the story are also an ordinary family in the north, and the picture shows their daily life in the four seasons of the year, and I grew up in such a family. During the Spring Festival, I will have dinner with my parents, brothers and sisters and grandpa. When I was young, I used to play in the yard with my Cousins, too. YIMI's products are mainly household goods and stationery. This project is very interesting and meaningful to me. This is not only a web design, but also represents the culture of my hometown. I also hope to inherit and carry forward my national culture.

What I learned

Through this project, I have mastered HTML, CSS, and JavaScript skillfully. I also learned new programming knowledge: PHP and MySQL. I combined my own design and code to complete the YIMI web design.