BACKGROUND
BACKGROUND
Why To Make
Why To Make
The website built on the Alibaba Cloud server many years ago was due to renewal issues. Last year, I suddenly found that the website was gone, and I thought about launching it again. However, the previous design was a bit boring. After I left iQIYI, rebuilding my personal website was put on the agenda again.
The website built on the Alibaba Cloud server many years ago was due to renewal issues. Last year, I suddenly found that the website was gone, and I thought about launching it again. However, the previous design was a bit boring. After I left iQIYI, rebuilding my personal website was put on the agenda again.
PLANNING
PLANNING
PLANNING
Website Inspiration
Website Inspiration
The personal website mainly considers the site structure and style.
I have considered many directions in terms of structure and content, but they all feel a bit ordinary. I am uninspired and have no clear direction for a long time. After wandering around on twitter, the design style of Bento Box suddenly caught my eye.
The personal website mainly considers the site structure and style.
I have considered many directions in terms of structure and content, but they all feel a bit ordinary. I am uninspired and have no clear direction for a long time. After wandering around on twitter, the design style of Bento Box suddenly caught my eye.
Bento means Japanese-style bento box. This webpage design style is constructed by using grid blocks of different sizes similar to bento boxes. The grid, large rounded corners, and card-style design are all distinctive features of Bento style.
Bento means Japanese-style bento box. This webpage design style is constructed by using grid blocks of different sizes similar to bento boxes. The grid, large rounded corners, and card-style design are all distinctive features of Bento style.
DESIGN
DESIGN
Design Language
Design Language
I hope the overall design is simple, avoiding complicated and unnecessary content, so that readers can focus more.
Therefore, the overall website design uses dark colors, large rounded corners, large fonts, large icons, and micro-motion effects. Through the enlarged display of a small amount of content, users' browsing efficiency and website recognition are improved.
I hope the overall design is simple, avoiding complicated and unnecessary content, so that readers can focus more.
Therefore, the overall website design uses dark colors, large rounded corners, large fonts, large icons, and micro-motion effects. Through the enlarged display of a small amount of content, users' browsing efficiency and website recognition are improved.
DESIGN
DESIGN
Homepage Detail
Homepage Detail
The homepage has reduced the overall exposure of text. Using a bento box as a container, exquisite skeuomorphic design icons are used as link guides, and interactive effects are added to enrich the user experience.
The homepage has reduced the overall exposure of text. Using a bento box as a container, exquisite skeuomorphic design icons are used as link guides, and interactive effects are added to enrich the user experience.
In terms of animation, the scale effect was also used, and using spring instead of traditional ease can make the effect more natural.
In addition, a delay effect was added to each module to make the transition more hierarchical.
In terms of animation, the scale effect was also used, and using spring instead of traditional ease can make the effect more natural.
In addition, a delay effect was added to each module to make the transition more hierarchical.
DESIGN
Navigation Bar
Navigation Bar
The website's navigation bar adopts a hamburger-style menu, which is primarily space-saving, and the pop-up navigation design is quite aesthetic.
The pop-up navigation interface also adopts the bento style and the same animation parameters to maintain a consistent design style.
The website's navigation bar adopts a hamburger-style menu, which is primarily space-saving, and the pop-up navigation design is quite aesthetic.
The pop-up navigation interface also adopts the bento style and the same animation parameters to maintain a consistent design style.
DESIGN
Linear Effect
Linear Effect
Recently, the linear effect has become very popular in the industry, and a large number of websites are imitating their various effects. Of course, uniform designs would lead to homogeneity in the industry's products and become boring after a while. I very much appreciate the lighting effects they used on their pages, which are just right and have inspired me.
Recently, the linear effect has become very popular in the industry, and a large number of websites are imitating their various effects. Of course, uniform designs would lead to homogeneity in the industry's products and become boring after a while. I very much appreciate the lighting effects they used on their pages, which are just right and have inspired me.
My website uses dark design, so the light effect is very suitable here. So I made some interesting effects for individual objects of the website to enhance the overall experience.
My website uses dark design, so the light effect is very suitable here. So I made some interesting effects for individual objects of the website to enhance the overall experience.
To learn more about technical content, please refer to the following technical links 🔗
To learn more about technical content, please refer to the following technical links 🔗
DESIGN
Challenge
Challenge
In the process of website construction, many factors other than pure aesthetics need to be considered, such as breakpoints, self-adaptation, and the implementation of interactive effects.
During the design process, I adopted the bento style design. For instance, the homepage uses 100vh to achieve a single screen height. This design, combined with the bento style, also feels very natural.
In the process of website construction, many factors other than pure aesthetics need to be considered, such as breakpoints, self-adaptation, and the implementation of interactive effects.
During the design process, I adopted the bento style design. For instance, the homepage uses 100vh to achieve a single screen height. This design, combined with the bento style, also feels very natural.
The user has a need to browse content on different devices, and requires breakpoint design to adapt to desktop, tablet and mobile.
The user has a need to browse content on different devices, and requires breakpoint design to adapt to desktop, tablet and mobile.
Epilogue
Summary
Summary
Creating a website is an extremely energy-consuming task, as it involves not only design but also the work of product managers, designers, developers, and testers. The constant revisions and starting over again have left me in a dilemma at times, but the problem-solving process has driven me forward.
Although the website is now complete, I will continue to optimize and iterate, updating content, and I hope everyone will continue to follow along.
Creating a website is an extremely energy-consuming task, as it involves not only design but also the work of product managers, designers, developers, and testers. The constant revisions and starting over again have left me in a dilemma at times, but the problem-solving process has driven me forward.
Although the website is now complete, I will continue to optimize and iterate, updating content, and I hope everyone will continue to follow along.
@2023 KevinZhao
By KevinZhao
@2023 KevinZhao
By KevinZhao
@2023 KevinZhao