Five phases: Graphic design to website design

Five Phases Card Collection

THEME INTRODUCTION

Five phases theory, also known as five elements, is a Chinese philosophy used to describe interactions and relationships between all things. The five elements – wood, fire, earth, metal, and water – are believed to be the fundamental elements of everything in the universe between which interactions occur. The theory first appeared during the spring and autumn period (770-476 BC). It became widespread: mostly used in Chinese medicine, philosophy, Fengshui, fortune-telling, and martial arts. I have used it as an inspiration to the design theme.

 

 

WEBSITE DESIGN 

I designed five website homepages reflecting these five elements.

1.  Metal – LAMPO

Lampo means lighting in Italian. It is a high-end luxury bicycle company based in Italy.

Black, white, and gray color and the sleek flowing design speak to the strength and malleable character of the metal. The primary menu in the middle of the page with a left-right swipe reflects the speeding of the riding experience.

MetalMetal-Lampo bike.png

2.  Earth – AVIVA

Aviva is a modern design for a jade jewelry brand. Jade can refer to either nephrite (a silicate of calcium and magnesium) and jadeite (a silicate of sodium and aluminum). Jade is featured prominently in ancient Asian art. Chinese craftsmen have been producing jade objects for over 5,000 years.

Using the watercolor effect as a background reveals the character of jade – sweet, light and nourishing energy that can feel very healing. It has a soothing purity about it, and goes about purifying your energy field in a manner that is accepting, loving and wise.

EarthAviva Jade

3.  Water – ARCTIC CONSERVANCY

The Arctic Conservancy is a non-profit environmental advocacy organization. It promotes healthy and diverse arctic ecosystems and opposes practices that threaten oceanic and human life. It advocates for the protection of special arctic habitats, restoring sustainable fisheries, reducing the human impact on arctic ecosystems, and managing arctic resources.

I designed two sections of the arctic conservancy webpage. The user can scroll down from the first home page into the second one with interaction effects. I use the immersive experience to arouse the viewers’ empathy, leading them to make an action – learning more or donating.

WaterArctic ConservancyArctic Conservancy Mission Menu

4.  Fire – TAI RYOU TEPPANYAKI

Newly opened authentic Japanese teppanyaki. The neon restaurant name brings a hot flame for exciting gastronomes. The looping background video shows a preview of the dining experience on the hero section.

This website design is intentionally sparse – I deliberately use the whole canvas to leave for a motion video showing the amazing teppanyaki cooking techniques, deliciously fresh ingredients, and satisfied customers to grab attention and lead to the main purpose – come and eat! For certain content or business purposes, one must give up some traditional designs to reach your audience. Like Tai Ryou teppanyaki, there are two simple messages – great food and book now!

FireTai Ryou Teppanyaki

5.  Wood – BÅBO WOOD CRAFTS

BÅBO WOOD CRAFTS is a wood handmade store in North Europe known for their wooden bookmarks.

The color choice is centered on beige colors and natural feelings. One glance of the navigation tab gives the user a straight forward message of what this store offers. I wanted to create a natural and simple feeling for this website.

WoodBabo wood work

MOOD BOARD  

Mood boards help me to convey ideas and feelings, building projects through the vibes and color palettes.

Mood board_five phases_frame

AFTERWORDS 

This was a fun project to carry out my concepts for more graphic practice with themed website designs.

Type: Individual (Creative Concept/Graphic Design)

Timeline: 3 days (Sept 2019)

Tools: Sketch, Adobe Photoshop, Illustrator

Credits: Nick Colella (Science consulting) 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s