gaviwei

[gaviwei]

陽光伏特家-會員中心重整 / UI UX

2019.06

design / gavi

https://www.sunnyfounder.com

This was the first big project I did in Sunnyfounder. Following the company had run for 3 years, our market and member had grown a lot, and it's time to get rid of the theme. Also, another reason was it’s way too hard to use on mobile devices. This new version focused on mobile-first more than desktop, to level up the readability and usability, especially we had a monitor system for our members, we want it to be easy to use as it can, to check their solar power plant anytime. 

the last version ↑

Follow the branding guide, I made a new series icon to apply in different scenes I could imagine now, and the future, also for some social post or our youtube channel and so on.

For the icons, we have basic usage such as “the hamburger” , “forward”, “search”, also the weather set for monitor information, our services and other pages in the account center.

While designing the navigation and the menu between desktop and mobile, the first challenge was how to represent the different meanings of our service via icons. And to figure out all the status our members could encounter, such as we offer a free 30days trial for new rigister, and when it finished, this page will not be shown on the menu; also we have our landlord who rent their roof to us to build a solar power plant. They have another monitor to watch different from the investor. 

It was my first UI design for the account center. It has a lot of different and challenging from an article website. Such as forms with status, dropdown menu, checkbox, table with different status or data to be shown, open it or not? clickable or not? what is the ratio when it in several window width?🧐

All these design choice suffered me for a whole summer, I kept sketching all the possible or idea, and several questions for my pm to figured it. And it ends up quite well.🥳

Afterward, we also collect feedbacks from users, such as could the contrast higher, it’s too light for mid-quality screen to display? We also offer a SUS  (System Usability Scale), although we got around 60, at least it shows we can still improve it. 🤡

[gaviwei]

From Thai to Thai 泰潮直送 / Web

2019.06

design / gavi

front-end / gavi

tech / HTML,CSS,RWD

Client / 松山文創園區,泰國創意經濟促進局,大人物

https://www.damanwoo.com/events/fromThaitoTai

A promotion collaborates with CEA (Creative Economy Agency) and Shong Shung culture park, they hold an exhibition: 材料進行式Material in Motion. With more than 20+ artist based in Taiwan or Thailand, focused on multiple materials design.

I chose water or liquid to present the feeling of this tropical country also was my impression of Thailand. I’ve been there 4 times, always be impressed by their design combined tradition craft with modern design.

[gaviwei]

一頭鑽進熱愛的世界 / Web

2019.10

design / gavi

front-end / gavi

tech / HTML,CSS,full-page.js ,RWD

https://www.damanwoo.com/events/beloved

An event page interview 5 masters in their fields. Such as the artist who had drawn movie billboards for more than 50 years, a theater manager running the theater for 30 years, a writer who focused on exploring the old-time beauty and try to preserve it through the article spread on the social network.

This project was the first time try in to use fullpage.js. For the time I started to code by myself, I got frustrated dealing with Js function, also not really familiar with this language, that's the reason I rarely use it. But I and my client had some ambitions on this, so we try this with an open-minded. Even though we kinda failed at the time when we supposed to run this project, the frame of the original website doesn't combine this framework well, so we end up post the not full-page one. But after that, I got some spare time during vacation, I figure out the bugs, and fix it. (yeah~~).

[gaviwei]

台味設計發酵專題頁 / Web

2019.05

design / gavi

front-end / gavi

tech / HTML,CSS,RWD

https://www.damanwoo.com/events/TaiwanCultureRenaissance

An event page about Taiwanese traditional artificial technique, how it was and reborn for now time. 

I chose and redesign some iconic brick patterns to build on the impression of the old-time style. And using black for background for the content block to keep the basic readability, since it’s an article-based topic. 

[gaviwei]

18′ Damanwoo.com anniversary / ui , web design, illustration

Damanwoo.com anniversary site

With member illustration, also a  rush project within 1.5 weeks to made it happen.

https://www.damanwoo.com/shopEvent/anniversary

-

design / gavi

front-end / ting

[gaviwei]

17′ Christmas gift recommend slot / ui , motion, illustration

A slot machine concept for you suffered from picking a gift for your close friend, colleague, lovers, and some you don’t even like it but have to.

-

-

design / gavi

front-end / ting

back-end / sean

Christmas Project

---

1. selected sale

2. riso printed bags

3. slot machine

[gaviwei]

秋意濃 / Web

2018.09

event page based on damanwoo.com

design / gavi

front-end / ting

https://www.damanwoo.com/shop/node/5006

[gaviwei]

比生日值得紀念的開學日 / Web

2018.09

event page based on damanwoo.com

design / gavi

front-end / ting

https://www.damanwoo.com/shop/node/5002

[gaviwei]

日本樂天銷售 / Illustration

2018.08

Client / Rakuten Japan

Monthly post

[gaviwei]

Damanwoo shop  -redesign / Web, UI

2017.10

Side-site based on damanwoo.com An online selected shop full of quality cool product with great design. The old version wasn’t friendly to mobile user, with messy style. The following new version base on clean and comfortable visual, using 2 high-light color to emphasize title or price.

You can go surf the site, maybe find something interesting.

>> https://www.damanwoo.com/shop

–

design / gavi

front-end / ting

back-end / Sean

Just  found these old version screen shots. This version was based on Damanwoo.com, which is more like a blogger system and building from ten years ago  (as I know). And, yes, obviously there’re lots of issue to fix it.

Let’s check out the brand new one.

[gaviwei]

伊藤潤二 恐怖體驗展 / Web, UI, illustration

2018.07

Based on damanwoo.com. As an event site for Junjiito - ghost house exhibition held in Taipei. Display the exhibition information and goods selling. The main visual illustration created by Chin-Lin,Chen. Part of add-on illustration by me. Follow by the ghost house concept, we use some animation such as the loading page, we use floating doors to represent the maze, fade-in opening for the landing page, blood dripping for the product page. According to the copyright with Japan agency, we can’t modify the main visual, however, to present the art, I did some illustration to full-fill the needs.

–

design / gavi

front-end / ting

back-end / sean

>>https://www.damanwoo.com/shopEvent/junjiito

Loading page

2 versions for the loading page. No.1 - glitching face The concept was from the common horror movie using a glitching tv scene. Due to the copyright agreement, it seems like the glitch changed the image, and seemed to be modified the illustration. So the ver.1 got rejected.

No.2 - floating doors The concept idea was from the exhibition itself. As a ghost house maze shows the imagination for doors to escape. It also resembled the entrance of this site.

Main page

-Opening visual Using exhibition visual animation to show the first impression.

-  ghost house concept There are 3 different routes for the ghost house. Without leaking any route but represent the idea of each one, I re-create the image for the 3 concepts. Using the road sign to switch the route and read the story.

-the eyeball -SNS sharing We add on at the last minute, and for a little fun.

Product page / Category page

Based on damanwoo.com/shop, using the same form to quickly built the page. With blood dripping fixed on the top for a bit atmosphere. The original concept was more like a scroll-down effect with dripping. Since the loading will be really slow due to the js, so change it to a simple background animation.

[gaviwei]

Xpump promo / Web, pop-up store, graphic

誠品生活 募資商品體驗展

2017.05

United with eslite living and zeczec.com. We had a  crowdfunding product exhibition, providing customers experienced all the creative project, and to support the one immediately by off-line selling.

project list

pop-up store display & printing (walls, flyer, signs)

promo website (based on wix.com)

[gaviwei]

誠品設計節 國際得獎商品展 / Web, UI

2017.05

Based on damanwoo.com. We run the site and manage the e-commercial for eslite living as a International Product Design award.

–

design / gavi

front-end / ting

back-end / sean

[gaviwei]

CCMAP  -redesign / Web, UI

2017.06

Side-site based on damanwoo.com As an activity meta-search site, included exhibition, performance, live show, concert and so on. Using open-source from MOC.gov. 

--

design / gavi

front-end / ting

>> https://www.damanwoo.com/ccmap

[gaviwei]

日本樂天銷售 / Illustration

2018.07 / 12

Client / Rakuten Japan

Monthly post

[gaviwei]

旅行，我戒不掉 / Web

2018.03

promo page based on damanwoo.com

design / gavi

front-end / ting

>> https://www.damanwoo.com/shop/node/4546

[gaviwei]

大人的內心戲文具 / Web, graphic

2017.09

promo page based on damanwoo.com

design / gavi

front-end / ting

article /

https://www.damanwoo.com/stationery-exhibition

https://www.damanwoo.com/node/90284