```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2F1eCs0yTHGaCJWperj04y%2Fe436059e-18aa-4ba0-b0fa-aeae7f568dd2.jpg?alt=media&token=e743c10e-e5f7-4b9f-9624-52629cc3bedc","id":"e436059e-18aa-4ba0-b0fa-aeae7f568dd2","width":3840,"height":2043,"filename":"bgbg.jpg","type":"image/jpeg","caption":"","border":false}]}
```

**About this plugin**\
\
FontDetector is a tool powered by myself and GPT-4, designed to help you view web fonts by hovering text. You can easily explore your favorite font families, weights, sizes, letter spacing, line heights, and text alignments.

The code has been written by GPT-4, and all I did was tell it my requirements in Chinese.

**How it works**\
\
FontDetector simplifies the tedious process of determining fonts as you browse the web. No more switching between windows or searching through lines of code. Just hover over a font you like, and within three seconds you'll have the font name, saving a ton of time!

Hover, detect, select. As easy as 1-2-3. An essential tool for any web designer or front-end developer.\
\
[Plugin ↗️](https://chrome.google.com/webstore/detail/fontdetector/jphgedmdokkhlllaibcbndaccmdcckfe)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2F1eCs0yTHGaCJWperj04y%2F0f8c8165-7403-4bc5-a79a-f4b88712bda3.mp4?alt=media&token=1b39c19a-bb64-41f3-a6c6-1a0b9d34d67b","id":"0f8c8165-7403-4bc5-a79a-f4b88712bda3","width":1280,"height":932,"filename":"ddd.mp4","type":"video/mp4","caption":"How to use it","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2F1eCs0yTHGaCJWperj04y%2Fe5af4e62-81f2-4411-9451-2a3f77ddc09e.png?alt=media&token=8dfc8ef2-cd12-4011-88c8-975bf2918e53","id":"e5af4e62-81f2-4411-9451-2a3f77ddc09e","width":1650,"height":2184,"filename":"ray-so-export.png","type":"image/png","caption":"Partial code","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Ffontdetector%2F8f372358-d78f-4a11-9552-2d7ffa231c28.png?alt=media&token=cb05bb97-6293-4bc4-9607-b4ec8c27fcef","id":"8f372358-d78f-4a11-9552-2d7ffa231c28","width":1500,"height":820,"filename":"post-49035a34-e687-42e2-bd89-44d6ff895b90.png","type":"image/png","caption":"Featured by Google Web Store","border":false}]}
```

FontDetector

**About MyINSEAD**

\
MyINSEAD is like a one-stop online hub for INSEAD students and alumni. It's got all the important stuff about school, events, and other updates. Seeing how everyone's on their phones these days, INSEAD decided to make a mobile app version of it. This way, whether you're a student or an alum, you can easily check out what's happening at INSEAD, anytime, anywhere. It's all about making things smoother and more convenient for the INSEAD community.\
\
\
**What did I do**

**\
Concept Direction**\
I was responsible for part of the UI style exploration, designing conceptual designs in different styles based on different keywords

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Fmyinsead%2F949f6c2c-70a9-4766-aa7e-e2677c89432f.jpg?alt=media&token=0d08a769-6a1a-4a0f-b261-dd104ef8cbf7","id":"949f6c2c-70a9-4766-aa7e-e2677c89432f","width":3400,"height":2157,"filename":"ad-full.jpg","type":"image/jpeg","caption":"","border":false}]}
```

**Production**

I was involved in most of the product design process to make the entire product content as well as the product logic complete so that it can meet the standards of delivery development

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Fmyinsead%2Fd88db42e-1d95-4a9a-9f4c-90a6e098cf3a.jpg?alt=media&token=74fed48a-e858-4b3d-ab5c-6e2cb17586ce","id":"d88db42e-1d95-4a9a-9f4c-90a6e098cf3a","width":2761,"height":1709,"filename":"wireframe.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Fmyinsead%2F11b846d8-6f85-4a0b-a826-7733cbe21d06.png?alt=media&token=8927e207-332f-4d56-9648-d482803d57fb","id":"11b846d8-6f85-4a0b-a826-7733cbe21d06","width":1656,"height":712,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Fmyinsead%2Fc0142256-978a-46fd-bb81-43f0017b7179.png?alt=media&token=ab1e5b9a-16a2-4fec-ba4f-f2578d11e8f8","id":"c0142256-978a-46fd-bb81-43f0017b7179","width":1738,"height":704,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Fmyinsead%2F1a23fece-e328-49d9-a59c-9d813b073430.png?alt=media&token=129af06b-6f8b-4bfb-bf55-b9ad08074a3f","id":"1a23fece-e328-49d9-a59c-9d813b073430","width":1972,"height":706,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Fmyinsead%2F6e4030d4-b524-4b4e-a2d5-a0957e26521c.png?alt=media&token=e6356c46-2b64-401a-835e-af7651cde1b7","id":"6e4030d4-b524-4b4e-a2d5-a0957e26521c","width":1668,"height":706,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

**Prototyping**

In this project we interacted with usability testing to ensure that the end goal of the product met the needs of the target users.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Fmyinsead%2Fb1c83c1c-f45b-4247-a447-e1c526848422.png?alt=media&token=5721d8ed-0c47-42d7-ae61-b08761cdb2f0","id":"b1c83c1c-f45b-4247-a447-e1c526848422","width":1872,"height":1642,"filename":"WX20230821-101439@2x.png","type":"image/png","caption":"","border":false}]}
```

UI

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Fmyinsead%2Fde3dea2b-eb2f-4219-a763-27c75da66344.png?alt=media&token=da0db1a8-8fbf-4b02-918e-99ff71ba46ef","id":"de3dea2b-eb2f-4219-a763-27c75da66344","width":4506,"height":2324,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Fmyinsead%2Faccaae24-c292-4091-9e63-39a1b71193d5.png?alt=media&token=3a33a7af-83f6-4e6e-ae0e-af9bb06fc858","id":"accaae24-c292-4091-9e63-39a1b71193d5","width":4506,"height":2324,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Fmyinsead%2F5e27d2bc-8960-4437-a0b2-0dfa96cea6ec.png?alt=media&token=64bc8fd5-cfd3-49e5-b3db-5320029adaf1","id":"5e27d2bc-8960-4437-a0b2-0dfa96cea6ec","width":4506,"height":2324,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

Project Copyright @[MING Labs](https://minglabs.com/)\
Design lead: Nathan Gao; UX designer: Zanwei Guo

MyINSEAD

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FG2INZugxy9gY11MMpq1P%2F994a95c0-ef86-4fff-af30-93dcf5134ace.jpg?alt=media&token=2e17fa9b-eda6-4766-94f1-2938cbf360ca","id":"994a95c0-ef86-4fff-af30-93dcf5134ace","width":4096,"height":2816,"filename":"ProDisplayXDR-02 1.jpg","type":"image/jpeg","caption":"","border":false}]}
```

The new [AFFiNE](https://AFFiNE.pro) official website has been launched, this time we've updated to a white version, hoping to discard the overly technical first impression from before. We hope everyone will like it. Some content is still being synchronized, and more updates will follow.

**Hero Image**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FG2INZugxy9gY11MMpq1P%2F5a291c99-d0ed-42e2-823a-8c92b8aaddac.png?alt=media&token=cafe111e-10db-4688-9c36-0d964773efad","id":"5a291c99-d0ed-42e2-823a-8c92b8aaddac","width":2620,"height":1038,"filename":"截屏2023-11-10 13.37.08.png","type":"image/png","caption":"","border":false}]}
```

The new version of the website primarily aims to discard the highly technical tone of the previous one. Since AFFiNE, as a note-taking tool, is intended not to be limited to developers, this is the core element in our redesign.

Here, a mix of fonts is used to emphasize the diversity of AFFiNE's product features, while the 3D icons also serve to make the overall product more approachable and lively.\
\
**[Promotion Video](https://x.com/layers_to/status/1715789152585707803?s=20)**

```cv
tweet
https://twitter.com/layers_to/status/1715789152585707803?s=20
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FG2INZugxy9gY11MMpq1P%2Fbc033d56-9945-42e8-b9a4-ca568e42a835.mp4?alt=media&token=2075d6a9-bc18-440e-9c03-db52ae2d10ec","id":"bc033d56-9945-42e8-b9a4-ca568e42a835","width":2160,"height":1500,"filename":"11.mp4","type":"video/mp4","caption":"","border":false}]}
```

Because AFFiNE is not very well-known (although it has already received 23k Stars on [GitHub](https://github.com/toeverything/AFFiNE)), we plan to use videos on our official website to quickly help users understand what AFFiNE is for.

1. We're using [matter.js](https://github.com/liabru/matter-js) to achieve the effects

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FG2INZugxy9gY11MMpq1P%2F20cdb851-c2d8-4fd3-b0c3-f5db229b1cda.mp4?alt=media&token=07890c7b-7bf8-496d-a4ef-e69801012fef","id":"20cdb851-c2d8-4fd3-b0c3-f5db229b1cda","width":1446,"height":1454,"filename":"33.mp4","type":"video/mp4","caption":"","border":false}]}
```

2. Also we're using json :D

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FG2INZugxy9gY11MMpq1P%2F6ce180b7-fb6c-4090-9c86-31940548ff12.mp4?alt=media&token=ba22f8ff-4189-4be4-9e05-13d59d770a81","id":"6ce180b7-fb6c-4090-9c86-31940548ff12","width":2846,"height":1622,"filename":"json.mp4","type":"video/mp4","caption":"","border":false}]}
```

Due to time limitations, some aspects have not yet achieved perfection. We plan to refine these in the upcoming iterations

See it live at: https://affine.pro

AFFiNE's V3 website

This project comes from 2019\
\
The requirement for this project is re-design visually based on the client's expectations.\
\
The name of this company comes from the 6 keywords, **Empathy, Ethical, Evolutionary, Efficacy, Eclectic, and Endurance**. The client wanted to express a sense of competition. So based on the name of their company and the central idea we came up with using the GO game to represent competitively.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2F385db62e-a593-4174-b449-e35f8738c362.png?alt=media&token=d8c71693-0971-4e65-9ec3-52b099c67cc1","id":"385db62e-a593-4174-b449-e35f8738c362","width":1760,"height":850,"filename":"image.png","type":"image/png","caption":"\"六弈\" is pronounced the same as 6e in Chinese. ","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2F661b9261-a03b-4c34-ada4-32e9548db092.png?alt=media&token=5852e152-58df-4908-bf16-906a85933d23","id":"661b9261-a03b-4c34-ada4-32e9548db092","width":1760,"height":984,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

\
Extract visual elements according to Go and some combination of elements

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2F1604482a-7b4f-460d-92f1-f279c71176eb.png?alt=media&token=02a389dd-3005-4197-ac13-07c1013dbd86","id":"1604482a-7b4f-460d-92f1-f279c71176eb","width":1140,"height":756,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2Fce950362-5e7e-485e-967b-11e34abd0c25.png?alt=media&token=0e3e7900-9d8b-4b9a-831a-2c4b7275e192","id":"ce950362-5e7e-485e-967b-11e34abd0c25","width":1760,"height":864,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2F38318abd-0f18-4bfc-8c0a-fff006ba1e2b.png?alt=media&token=bf6ec728-9f0f-409e-af65-43bf2853cdba","id":"38318abd-0f18-4bfc-8c0a-fff006ba1e2b","width":1738,"height":924,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2F2b9d28ee-77a9-4c11-b47d-d272581f67a7.png?alt=media&token=db60fe14-76cb-48e7-aee1-c1534f41b462","id":"2b9d28ee-77a9-4c11-b47d-d272581f67a7","width":1718,"height":1046,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

\
Of course, we made an animation to makes our design convincing

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2F94697389-ca38-4bdc-8fd7-642c6ec3696c.mp4?alt=media&token=bdf82375-32e7-4c5f-bf72-684a49b3f033","id":"94697389-ca38-4bdc-8fd7-642c6ec3696c","width":1596,"height":898,"filename":"1.mp4","type":"video/mp4","caption":"hero image","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2Facc66800-4e3e-402d-be32-e9381e4c0db7.mp4?alt=media&token=ba1ba15e-fba0-4236-b466-cf871ace6be3","id":"acc66800-4e3e-402d-be32-e9381e4c0db7","width":1596,"height":898,"filename":"1.mp4","type":"video/mp4","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2F7b5e4881-8b9f-481f-80eb-492c0c11be57.mp4?alt=media&token=f803f220-d375-42f6-9999-eb92b6266dd8","id":"7b5e4881-8b9f-481f-80eb-492c0c11be57","width":1596,"height":898,"filename":"1.mp4","type":"video/mp4","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2Fa2cf2cba-7614-4ba1-a247-f5b19734e078.mp4?alt=media&token=98cbee22-ddb9-4508-8482-b37fa3bf077c","id":"a2cf2cba-7614-4ba1-a247-f5b19734e078","width":1596,"height":898,"filename":"1.mp4","type":"video/mp4","caption":"navigation bar","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2Fc6210911-5437-44c7-8fc7-e69de114618b.gif?alt=media&token=62b39309-01ee-4f8a-bfc9-4d28e0d1a9be","id":"c6210911-5437-44c7-8fc7-e69de114618b","width":800,"height":600,"filename":"image_processing20210723-10500-1h9x33r.gif","type":"image/gif","caption":"","border":false}]}
```

\
Of course, in 2018 we are still using Sketch for responsive design.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2Ff011a007-31e2-46cb-beab-7ac552420614.png?alt=media&token=c2626732-5bf2-4fde-85a5-f40d30f304e6","id":"f011a007-31e2-46cb-beab-7ac552420614","width":1470,"height":1052,"filename":"image.png","type":"image/png","caption":"Web","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2Fb6080b23-f0da-4754-938b-ad64dd71732b.png?alt=media&token=708e4daf-82d7-49c2-ad98-bc8ed6f5be30","id":"b6080b23-f0da-4754-938b-ad64dd71732b","width":1470,"height":1242,"filename":"image.png","type":"image/png","caption":"Tablet","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2Fa2e79590-7e4e-4a91-b9e2-b1a94af38395.png?alt=media&token=448b6bca-c365-4f8c-866c-968113ce009d","id":"a2e79590-7e4e-4a91-b9e2-b1a94af38395","width":850,"height":712,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2F3af86a08-7799-40e2-871c-4ef13452740f.png?alt=media&token=76647dfc-4066-4a37-8b49-ecd251d33c9d","id":"3af86a08-7799-40e2-871c-4ef13452740f","width":842,"height":650,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

\
In the end, this project taught me one thing is before starting we need to \
figure out **what is the company; what is the story behind it; what is the meaning of the brand before designing (by our CCO)**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FYH7EybxOuXay1LoWnM3y%2F983364bf-4c54-4023-87e8-d2b7aa3479dc.png?alt=media&token=90199aa7-d7bb-427e-8a0f-9d5d993d09ab","id":"983364bf-4c54-4023-87e8-d2b7aa3479dc","width":1084,"height":758,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

\
Project Copyright @[MING Labs](https://minglabs.com/)\
Design lead: Nathan Gao; Visual designer: Zanwei Guo\
\
Live version is [here](https://www.6e-group.com/index.html)

6e-Group

Gather is a new smart meeting device by Logitech. The main goal of this project is re-design the visual part based on Logitech's branding.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FoSy9kukmTCdfIAiHgIMA%2Fd6fa5598-b5de-4825-9318-71527946266e.jpg?alt=media&token=85bc7340-5bcc-49c5-9c61-cada3d5b2656","id":"d6fa5598-b5de-4825-9318-71527946266e","width":3940,"height":2453,"filename":"444.jpg","type":"image/jpeg","caption":"","border":false}]}
```

We redefined the basic style, like Color, Typography, Icons to reflect the "Youthful" and “Vibrant" (Which are clients wanted to express). and some basic visual language to applied the visual works

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FoSy9kukmTCdfIAiHgIMA%2F1a7d28b8-47fe-49a6-8a96-5951bd5907a9.jpg?alt=media&token=162b0521-7dbf-4b9a-93fd-dcb558dc261e","id":"1a7d28b8-47fe-49a6-8a96-5951bd5907a9","width":4305,"height":2551,"filename":"Frame 256.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FoSy9kukmTCdfIAiHgIMA%2F170c160d-4487-4921-8f97-3b8edbcba55f.png?alt=media&token=5a441650-7659-4e3a-85aa-f9772326bfe7","id":"170c160d-4487-4921-8f97-3b8edbcba55f","width":2446,"height":1352,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FoSy9kukmTCdfIAiHgIMA%2Fbfa3f47e-d48f-41e8-a9f7-6f17f31331d0.png?alt=media&token=c8449d3f-6b6b-4df7-8fd7-eefd831b4776","id":"bfa3f47e-d48f-41e8-a9f7-6f17f31331d0","width":2450,"height":1354,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FoSy9kukmTCdfIAiHgIMA%2F349e5ce4-dbd8-47a2-a7e1-9f10ef6d3a88.png?alt=media&token=7e36cb5f-d06e-4e30-a6bf-8fb9f1f4fc68","id":"349e5ce4-dbd8-47a2-a7e1-9f10ef6d3a88","width":2108,"height":990,"filename":"image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FoSy9kukmTCdfIAiHgIMA%2Fdee93320-c8ce-4db5-bd58-f232f77b5dc7.png?alt=media&token=40b10b38-774a-4bba-a2f2-f506b2b5cc17","id":"dee93320-c8ce-4db5-bd58-f232f77b5dc7","width":2458,"height":1270,"filename":"Screen Shot 2022-06-30 at 1.06.54 PM.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FoSy9kukmTCdfIAiHgIMA%2Fe07b3f6b-db24-4b05-8335-db8d9737b208.png?alt=media&token=64961779-b90a-4c44-bdd2-41bb61c1e5f2","id":"e07b3f6b-db24-4b05-8335-db8d9737b208","width":2448,"height":1306,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

And we did the UX audit before starting, We gathered all the information on a FigJam board, summarized all the small feedbacks into a few key problem areas, and brainstormed how we would fix them.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FoSy9kukmTCdfIAiHgIMA%2F5ce84b85-b8c1-4c2d-97fe-eef466f42689.png?alt=media&token=b7902298-85be-4a39-b848-db722f373f7b","id":"5ce84b85-b8c1-4c2d-97fe-eef466f42689","width":2376,"height":1170,"filename":"Screen Shot 2022-06-30 at 1.13.23 PM.png","type":"image/png","caption":"UX audit","border":false}]}
```

Also we made some motion demo to makes our design convincing and explain our design.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FoSy9kukmTCdfIAiHgIMA%2F211ad56a-e220-4268-98e1-d14101165618.mp4?alt=media&token=8ce9a929-964a-4567-a79d-aab0dc2c6447","id":"211ad56a-e220-4268-98e1-d14101165618","width":1920,"height":1080,"filename":"1.mp4","type":"video/mp4","caption":"Select meeting software","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FoSy9kukmTCdfIAiHgIMA%2F9bbacdf0-aa6b-442e-836e-6bfa0d607318.mp4?alt=media&token=1106e336-3778-433a-b57d-980016f9ef12","id":"9bbacdf0-aa6b-442e-836e-6bfa0d607318","width":1920,"height":1080,"filename":"2.mp4","type":"video/mp4","caption":"Settings","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FoSy9kukmTCdfIAiHgIMA%2F337791ed-1eee-4743-bc71-60c7fa0c9327.mp4?alt=media&token=c79809f9-ef08-4aa6-b435-ff94024c017b","id":"337791ed-1eee-4743-bc71-60c7fa0c9327","width":1920,"height":1080,"filename":"3.mp4","type":"video/mp4","caption":"Make a call","border":false}]}
```

Visual works

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FoSy9kukmTCdfIAiHgIMA%2F0f78b8ff-a30b-4eb1-aefe-c043d48ce877.png?alt=media&token=109fdf4c-c1bb-4f54-b17f-09be4a787c98","id":"0f78b8ff-a30b-4eb1-aefe-c043d48ce877","width":2760,"height":1508,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

Project Copyright @[MING Labs](https://minglabs.com/)\
Design lead: Nathan Gao; UX designer: Zanwei Guo\
\
Product details are [here](https://www.logitech.com.cn/zh-cn/products/video-conferencing/room-solutions/gather.950-000072.html)

Gather

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FqWFdA7KCcol1CGw0zYKK%2F13f065c8-be8c-4de3-846c-75109cbe4c6a.jpg?alt=media&token=7fa27092-2f26-4813-bf6b-55e633f395d0","id":"13f065c8-be8c-4de3-846c-75109cbe4c6a","width":4522,"height":3231,"filename":"logo.jpg","type":"image/jpeg","caption":"logo variants","border":false}]}
```

We have open sourced the design files for the [AFFiNE](https://affine.pro) logo at [figma](https://www.figma.com/community/file/1260248555835307433).

```cv
figma
{"url":"https://www.figma.com/file/xNe6JJtZB6UNIYNEvW3CYP/AFFiNE-LOGO-(Community)?type=design&node-id=0%3A1&mode=design&t=oEbTc11phHtQlEEi-1"}
```

AFFiNE Logo Concept

### **Project background**

Daikin was developing a smart home app named “Reiri for Home” for AC and equipment control remotely and efficiently. So for this project, we're mainly working on the UI part. We audited and expanded a few art directions, Finally settled on Reiri for Home’s final design.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Ft8Izl1jyP7hl8K1JmI1o%2Fc7177921-1bf4-4f1a-9907-f382f4230d73.jpg?alt=media&token=d9ccfe05-b7be-4c9a-adfb-93a8b02c7373","id":"c7177921-1bf4-4f1a-9907-f382f4230d73","width":2000,"height":1401,"filename":"Frame 280.jpg","type":"image/jpeg","caption":"","border":false}]}
```

### **Art direction**

To make sure the design direction is closer to the brand concept that Daikin is trying to convey. We proposed four directions for visual design. In the end, we decided to use **neumorphism** (which is the newest UI style these years) style to apply UI.

### **Icons**

Since reiri has many functions and needs to adapt to the multi-language environment, Icons have become the main way to express functions. Therefore, we redesigned a set of more than **100+ Icons** with the same style to better help users understand the features of the product.

### **UI Components**

Reiri has many functions, so it involves different functions and displays of different states, and we built a library of components to efficiently complete the design.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Ft8Izl1jyP7hl8K1JmI1o%2Fbb948fde-5a8f-4741-8f6b-4d9d7fa64509.jpg?alt=media&token=6e601744-25d4-49f0-9f3d-9f5dc1733144","id":"bb948fde-5a8f-4741-8f6b-4d9d7fa64509","width":2000,"height":1401,"filename":"Frame 281.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Ft8Izl1jyP7hl8K1JmI1o%2F506c5c0c-3f8a-4bd4-869f-852a8391df75.png?alt=media&token=082bf9c5-5a93-4f17-8f6a-36c18c02e3fb","id":"506c5c0c-3f8a-4bd4-869f-852a8391df75","width":2042,"height":1272,"filename":"pasted-image.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Ft8Izl1jyP7hl8K1JmI1o%2Fa1459a92-9c7b-4e0c-8c70-9cf729abcc78.jpg?alt=media&token=9917997c-e6f9-4080-8437-00ceaca29eda","id":"a1459a92-9c7b-4e0c-8c70-9cf729abcc78","width":2000,"height":1401,"filename":"Frame 282.jpg","type":"image/jpeg","caption":"","border":false}]}
```

### **Adaptation**

Also, This project includes tablet adaptation. With the mobile app complete, we used the same components, and adjusted the layout and some interaction to adapt to the larger screen.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Ft8Izl1jyP7hl8K1JmI1o%2Fa65659fb-75cd-4675-b496-a145741b964a.jpg?alt=media&token=18a8cd20-3875-4b2c-8f4a-01cb6997685c","id":"a65659fb-75cd-4675-b496-a145741b964a","width":2000,"height":1400,"filename":"111.jpg","type":"image/jpeg","caption":"","border":false}]}
```

**More screens**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2Ft8Izl1jyP7hl8K1JmI1o%2F884f44b2-7f2e-412e-8748-9e4ff98db7fb.jpg?alt=media&token=7cd64dc3-ef3e-4b12-8305-619cbdeb8b09","id":"884f44b2-7f2e-412e-8748-9e4ff98db7fb","width":2000,"height":1401,"filename":"Frame 281.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Project Copyright @[MING Labs](https://minglabs.com/)\
Design Lead: Nathan Gao; UX Designer: Zanwei Guo

Daikin

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2F6b2c2f11-bac9-4435-8333-b6386efbf4c9.png?alt=media&token=56f5744d-b965-455e-abb3-41b0e4c5a1e0","id":"6b2c2f11-bac9-4435-8333-b6386efbf4c9","width":1436,"height":798,"filename":"WX20220519-201252@2x.png","type":"image/png","caption":"","border":false}]}
```

HarmoniXX is a Web3 music-driven platform dedicated to arming artists with the creative technology tools and resources to achieve new and improved monetization of their works and to connect with fans in meaningful manner through the power of NFTs.\
\
For this project the scope is only two pages, First one is the homepage which is the official website and the second is the mint page. So I Defined the visual style at the beginning because the client was open the seeing the visual concept.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2Fc0806848-fb84-403c-9440-e84c171b2788.png?alt=media&token=1364a0c8-1820-46c0-b95b-7d527e912563","id":"c0806848-fb84-403c-9440-e84c171b2788","width":1434,"height":798,"filename":"WX20220519-194225@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2F4fe0406c-43a0-45bb-8a1c-9bed18d7d49e.png?alt=media&token=a4ff93a3-c9ef-4291-8a3e-26868442e831","id":"4fe0406c-43a0-45bb-8a1c-9bed18d7d49e","width":1436,"height":800,"filename":"WX20220519-194309@2x.png","type":"image/png","caption":"I defined 3 keywords to represent the client's vision for the product","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2F14a336c9-1721-401f-8670-b57967128593.png?alt=media&token=c96f67a4-1311-49ff-ac85-2eea9f6e8d1b","id":"14a336c9-1721-401f-8670-b57967128593","width":1446,"height":800,"filename":"WX20220519-194329@2x.png","type":"image/png","caption":"Chose the fluorescent yellow as the main color","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2F0e0e9b81-22db-47ed-a8fd-ce587f6f0ab8.png?alt=media&token=6d9ef55b-4c94-478a-a3bd-97b8e2bc894c","id":"0e0e9b81-22db-47ed-a8fd-ce587f6f0ab8","width":1440,"height":796,"filename":"WX20220519-194344@2x.png","type":"image/png","caption":"I try to visualize vinly as the main element for the webiste","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2F5216878b-7b09-4ca0-95e4-8625a3ebfe49.png?alt=media&token=a432327a-3a05-4a1d-912a-1ca73aad60f7","id":"5216878b-7b09-4ca0-95e4-8625a3ebfe49","width":1432,"height":794,"filename":"image.png","type":"image/png","caption":"Font selected","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2F5953e995-dcc4-4ad3-9294-b9ac2bdf0645.png?alt=media&token=1ac3c05f-78a3-40cd-b66c-7009bc46a0bb","id":"5953e995-dcc4-4ad3-9294-b9ac2bdf0645","width":1442,"height":802,"filename":"image.png","type":"image/png","caption":"Player definition","border":false}]}
```

Also we designed animations to makes the design more convincing. We also provide some references to help developers to achieve the effects.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2F304a6a53-3f3c-45c4-900b-10d969173cfa.png?alt=media&token=0093ba36-7c68-4da7-a604-57ebc1ddd66a","id":"304a6a53-3f3c-45c4-900b-10d969173cfa","width":1438,"height":796,"filename":"WX20220519-195456@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2Fa75051be-a5b4-498c-9b6f-d5c0df5f711e.mp4?alt=media&token=a5e0af6c-257d-40d9-91f5-6f6ca0c72aa5","id":"a75051be-a5b4-498c-9b6f-d5c0df5f711e","width":734,"height":1080,"filename":"Untitled.mp4","type":"video/mp4","caption":"Hovering vinyl","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2F90abd746-768f-4224-a5e2-1a7865dad136.mp4?alt=media&token=7da882f3-298f-4bc1-a6c0-de27600574ef","id":"90abd746-768f-4224-a5e2-1a7865dad136","width":1500,"height":800,"filename":"Comp 1_1.mp4","type":"video/mp4","caption":"Using lyrics effect to personalize the site","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2Fda02c73f-dddc-4702-bbcb-2b4d1dcc2c6c.mp4?alt=media&token=8a9f2cef-50cc-47e2-b315-04725c22fe82","id":"da02c73f-dddc-4702-bbcb-2b4d1dcc2c6c","width":1554,"height":1080,"filename":"4.mp4","type":"video/mp4","caption":"Scrolling effects","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2F2b4ffa59-a3a9-44ba-a449-1466784fd5e4.mp4?alt=media&token=9ede1f73-c5b2-4c79-b2e9-115e6fc3851e","id":"2b4ffa59-a3a9-44ba-a449-1466784fd5e4","width":1500,"height":800,"filename":"6.mp4","type":"video/mp4","caption":"Hovering text button","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2F5a62e218-a531-4c6b-8c03-ae000486876b.mp4?alt=media&token=4464f9fe-af2c-43ca-b176-e9b6d7f56c92","id":"5a62e218-a531-4c6b-8c03-ae000486876b","width":1500,"height":800,"filename":"8.mp4","type":"video/mp4","caption":"Hovering button","border":false}]}
```

In the end the project only lasts **7 days** so everything happened so fast. Fortunately everything is going well.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2F31137c24-6a8a-4374-a9c1-509d6d19d2cf.png?alt=media&token=290a854a-44df-477b-84f1-612041dabf9a","id":"31137c24-6a8a-4374-a9c1-509d6d19d2cf","width":1442,"height":798,"filename":"WX20220519-200817@2x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2F1a0cc5e0-0f9a-426d-915e-c9790449639b.png?alt=media&token=9e8441eb-40f3-4143-af1c-ff894182eb46","id":"1a0cc5e0-0f9a-426d-915e-c9790449639b","width":1424,"height":798,"filename":"WX20220519-200843@2x.png","type":"image/png","caption":"","border":false}]}
```

The live version is [here](https://www.harmonixx.io/)\
Case study is [here](https://www.behance.net/gallery/142622591/HarmoniXX)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F0GxlpceU5QVkcsPzcTHFcn9lRX22%2FxIIq9UXvKK5kxgRBe0ey%2Fa5fb87d6-0e17-4d04-b80a-2c5dce26be1e.mp4?alt=media&token=63ce4ef1-ff67-4b72-bfc5-4c87a32885fc","id":"a5fb87d6-0e17-4d04-b80a-2c5dce26be1e","width":1248,"height":720,"filename":"1.mp4","type":"video/mp4","caption":"","border":false}]}
```

**Because the client has some modifications after the project, but may not be satisfactory, the final design please refer to the case diagram :)**

HarmoniXX

Software Designer

Re-design MyINSEAD App based on their Web version.

Website

⌘K

Web project

Compass elevator control system(Stay tuned)

Compass

Gaming App

Air Purifier device control through the app.

Air Purifier App

Logo Redesign

Reiri For Home

Vacation Helper

FontDetector is a tool powered by myself and GPT-4, designed to help you view web fonts by hovering text.

NFT Music Platform

Becoming a Product Designer

Clients include:
Logitech, OTIS, Panasonic, 3M, Ford, BASF, Daikin, Keppel, INSEAD, Essilor, Envision and various startups

zanwei.guo

Contact

Work Experience

Projects

Side Projects