‘S
Index “3 About Me /Skills/ Experiences ”5 Proposal/Research/ Prototype “7 Photobooth/Touchscreen/Vending Machine Game ”15 Web UX/UI Design ”25
Light Art Installation/Animation
”29
Graphics: logo,poster,leaflet etc /Illustration
”39Self-directed study/Art tutor
about
ME
12yrs expt
Graphic Designer
7yrs expt
Multimedia Designer Art Director
Skills
Software Skills
Graphics Photography Illustration Post-production 2D Animation Motion Graphics UI/UX Design Painting
Photoshop Illustrator InDesign Premiere After Effects Procreate.Sketch Figma, Principa Sketchup
Client When studying in university, I mostly did graphic, and study of social issue. And during the period working in an interactive design company, we did jobs mostly for commercial use helping to promote the brand with games.
3
game”
animation”
Mobile game
Light art installation
Sensor triggeried game
Interactive projection wall
Touch screen game
Video booth
Multi-touch table
etc...
Kinect game Web/app game Projection
Documentary”
Graphic”
Interviews and editing
Booth Wrapping Design
Street and invited interview
Backdrop Design
Publication of process book
Calendar
Self-directed art piece
Desktop publishing
Traditional printing
illstration & painting Craft tutorial for children etc...
My Design Routine for interactive design Idea Developing (Proposal)
UX wireframing
UI Design
Work with programmer
Sketch
Prototype
UI Design Draft 2 - 3 styles for client
UAT
Product Launch
Review of project
Proposal
& Mockup
I love doing hand sketches to present idea and express the feeling a lot, which I think it is one of my strengths to put my ideas into images helping to convince people. Sometimes it looks raw, but it would be a fast way and could be easily edited. I would also do mock up with photoshops, mapping on some simple 3D model shapes. With the retouch skills, I could make the mock up in different perspective and area easily.
Mock up for Chinese New Year Event
I would also do proposal to present ideas for client like above.
6
Double Explosure
Shiseido Photo booth game
PR Event
2016 Double Exposure Photo Booth Gameflow/ Photoframe/ Landing page
Demo
We do photobooth a lot in the projects, but it is always in the question about how to make it creative and outstanding with limited space and technique of instant photo shooting booth. Double exposure is the effect that I love a lot as it could present the texture and feel of the product, and custom made with players’ face, which is kind of memorable gift for them.
La Mer Roadshow
2017 Double Exposure Photo Booth Gameflow/ Photoframe/ Landing page
Photobooth&
Kiosk Design Kiosk looks & feel Wrapping/Sticker design
Other than photobooth, there are many games on kiosk that I have done. Such as Prinstagram, which grab photos from the hashtag in instagram and print it out. There are also a lot of mini game and I am responsible for the interface design, wrapping design of the booth. It also takes a lot of time to do colour matching, which helps to match colour of the output sticker with the corprate colour provided by client.
Photo frame design
It is always fun to make creative ideas combining visual design with programs. Although it is hardly for program to make the photos exactly the same as what Photoshop can do, there are many methods to soft the limitation of programs. These are the effects of photo frame we design with visual elements provided by clients, and with the help of other art director.
10
Clarins Café Roadshow 2017 Memory and Matching Game + Card Dispenser
Dior Addict Roadshow 2016 Slot Machine Game + Vending Machine
Dior Colour Charms Roadshow 2017 Slot Machine Game + Vending Machine
Kiosk
Touchscreen Game
GA
Vending machine game
Clarins Double Serum Roadshow 2016 Touch Screen Game
Lancôme Roadshow @ Bangkok 2017 Item Chaser Reaction Game
Half old and Half new building I do research and take photos of old building parts.
Gashapon Machine Kiosk & Game Design
Location of the kiosk put
American festival style
Building Department
Kiosk & Q&A Game 2015 till now
Building Department’s Information Games is the very first, and a challenging kiosk game for me. I am responsible for the digital and outlook of the kisok. From the shape and structure, to the cutting of stickers, drawing of stckers etc. And from the sound, game UI, screensaver and transition animation, We have meetings with clients for a couple of time to talk about the aim, ideas, rule of games.
Sketch Ideas
Interactive Game
Optimel
Kinect Game
2 Marvel
UI Design and animation
Animation triggered
Movie 2017
UI Design &Animation
1
Call the Ironman by specific gesture
13
4 3
Take photo with Ironman
Share photo in landing page
Video cap screen
NYX POS
Long-term Installation @ Mongkok Flagship Store 2018 Video Booth Animation & Video editing
Dior Poison Girl Roadshow
2017 Dance Video Booth Video editing
Video Booth Game Animation
Website
For Goodview website, it is a plastic industry and we renew the website to make it looks more update. We sent photographer to take photo in China and I guide the team to take photos for cover banners, inner page and products. Since it required a neat and corporate design, I use a generic layout, and pick deep blue as main colour aligning with its brand colour.
We first confirm about the content, which is similar to original website. At the same time when setting wireframe, I make some draft design style and layout for client to choose at the same time. This may be more efficient for the design process. Then I will make the design correspondingly.During the design process, I changed the grid and size of thumbnail of gallery once, which I think putting a ultra thin line is more suitable for clean design.There was a question about how it looks and which information to show on the pop up enlarged view. Finally I prefer not to put information underneath to make it minimal according to user test's comment.I first make the desktop version, with 1080px width and different height as long as the content of page could be. then I make the mobile version as a responsive. It could shorten the amendment time preventing any error, which is like forgetting to updated all of the responsive UI design for tinny adjustment. I put all the important content on top which the user could view without scrolling the page.
15
TRUELIGHT College website design www.hktlc.edu.hk/cht
HKIed VAECD website design vaecd.eduhk.hk
When doing web design, I discuss with web programmers and there are some rules and guideline made, like the dimensions of the website, text point, choose of font, distance between title and content etc. It helps a lot that we can follow the guide for the rest of the projects.
Mobile Web
Facebook Status shared on friend’s timeline
Dior LipGlow Facebook friendship mobile game
Frendship index and suggested lipglow
DIOR ROUGE Touch Screen Game Heart beat sensor
For the projects of all UI/UX design, I have communicate with programmer and we made a set of guideline for general UI design. Like the dimension we set for different device, ipad, mobile and desktop. Other than the main website or game, we also do landing page for players to download photo and share to social media. We then make template or thumbnail for user to preview how it looks like when shared in social media. There is also a standard dimension for all these pages as well.Especially for website with photo uploading and photo shooting function, the size for photo captured or upload should be fixed. For Dior Lipglow project, the aim of the website is to promote the latest lipstick product. After doing some marketing research, we thought about making use of social media to make it more customised with the user, with lucky draw, loading page, multiple choice, timeline which grab information from facebook, and different sharing methods. For the page which random choose your facebook friends, they are actually the most interacting friends, which are potentially user's close friends. They way I put the button(showing profile picture of facebook friend) is not simply in a row for user to click, but allowing them to drag the star and point to the profile picture to confirm. It may looks more fun. For the loading page, I create a path in star shape in vector for programmer to make the loading bar. And the percentage would show the process of loading page.For the timeline, I want to make the path showing the timeline from old to latest one, the status will fade in one by one. Since the routine of path is irregular, there is different alignment for each facebook states. This required a good communication with programmer and we come into consensus of this UI design. Also, in case user doesn't know they can drag the page to lower part of the website, instead of making scroll bar, I add the arrow(with animation) as a reminder. It apparently looks better than adding scroll bar in the timeline.
Art direction by Michael
Game idea/proposal Video booth design Opening video web page by Anky
18
Event
Case Study
19
2014
Clarins Vcontour interactive Game
2016
LED Wall animation@SOGO cwb
Clarins 60thAnniversary@ShangHai White Plus interactive game @Worldtrade Center
2017
Double Serum Projection Mapping
Clarins White Plus interactive game
Mar 2017
2017 Clarins Double Serum Roadshow Hydra-essentie PR Event QR Journey 2018 Makeup PR Event Interactive Projection Wall Double Serum Repush@wtcmore 2019 Clarins Stores AR hunt
It is a web design for a product launch event. It’s a responsive website for desktop and mobile version. It could be made for iPad as well when it share the same layout design with desktop version. The main function of the website is promoting the event, sharing information for all workshops and doing registration and therefore in a simple layout with grids showing all the workshops and events.
21
For the whole page, it is set in grids with 3 columns For the registration form, the size and leading of typing boxes, the space in px between each box should be in even number. And I set the constraints or smart object in photoshop, to makes all the layout of event looks the same.
CLARINS Projection mapping & LED Wall
Promoting double serum products with animation. Idea: Neon, Paris, Ingradient, Colous of products for different age groups.
Home page
Mobile app AR Game UI Design & Animaation
Before check in
checked- in
Checked in = changed to coloured icon with animation
24
Light Art Inst a l lation Animation
ăƒť Demo animation made by After effect ăƒť Home page
Urban Decay@ShangHai 2018
Projection table
When putting the products on the table, animation specific for the product triggered Design idea: texture of products
When players put the product on the table, animation played around the product.
3 Camera video booth Video editing with shots taken by 3 cameras MON PARIS Fragrance
YSL Beaute Hotel @Seoul Korea 2018
Draft drawing
Lips/Tunnel/Wave forn etc
Cityplaza Christmas Interactive Slide Animation
Clarins @Hong Kong Central 2018 Design & animation
HK History Museum 影藏歲月展覽2013 Photo retouch & UI
Starbucks @ Hyssan 2019 Animation for Radar touch projection
GOODVIEW
Graphic
Calendar Design every year Web design Photo retouch for products and interior
Leaflet Calender Print-ad Backdrop Public transport-ad Namecard Photo-retouch Logo Booklet etc...
Photo Retouch
HKAPA
The Hong Kong Academy for Performing Arts Strategic plan 2013 - 2023
30
HKBU
Department of Humanites and creative writing Sence of HUM-our, Year of Silver 25years Anns
Invitation Card
Cover
Backdrop
Back
Booklet - cover
- Invitation Card - Backdrop - Booklet
32
LOGO
Logos & Design Process
NATUROLOGY Beauty brand Ideas and design process
Others
T R AV E L
34
Illustration Sketches Water colour Mixed media Character Design Vector Illustration Digital Painting (Photoshop)
Ipad Drawing
(Procreate, Sketch)
38
Poster Design Government Cosmetic Brand Movie Poster Music Album Event poster
E v e nt p o st e r s
Posters d e s ig n f o r g o ve r n me n t de pa r t me n t s
Movie poster re-design for 金陵十三釵
Credit On site photo by Kelvin
Travel journal poster for Trip in Cardiff
Time & Age Project TOUCH
36
Laser-cut Box-set : Posters of etching works on eye Publication of etching works on eyes telling time and age Publication of Story of older people <Your Story> Publication of Process of etching <Process of etching>
Self-Directed Project
TIME X AGE Sep2012 - May2013 - Forever
Video of process of etching Documentation of street interview in Bath Video of street interview in London, Brighton, Bristol and Bath Documentary of interview with older people in St Monica's House
This is a finaly-year project as a graphic design student in UWE, Bristol. The aim of my project is to encourage people to treasure their time by studying the relationship between time and age. People always say older people may experience more in their life and have a stronger feeling of time, such as the change of body, city, culture, relationship and lifestyle. Therefore, I want to focus on documenting the experiences and stories of older people, and find out how people of different age sthink of Time and Age.
| Ankyís Design
Et c h in g o n t h ic k p a p e r
Ti me through their ey es Books with 6 prints of in t e r vie we r s ’ e ye s
Pu b l i c a t i o n o f e t c hi ng p r o c e ss
40
Publication: www.behance.net/gallery/10198229/-Time-x-Age-Publication VIdeo: https://vimeo.com/66352744
H A R D
G R O U N D
E T C H I N G
Hard ground is an acid-resistant wax that is put evenly all over the etching plate. It is good for line work and stippling.
YOUR STORIES P u b licat io n A 4
www.behance.net/gallery/11065549/-Time-x-Age-Your-stories
Poster A3
P h o to g rap h y
vimeo.com/66347208
Vide o (Doc ume nta ry)
C a me r a , a u dio : K a r e n L a w Dir e c t o r , In t e r vie we r , Edit in g : An k y H o n
Have been tutor in the church since 2017. With the help of other tutors, who are children books readers and illustrators, experienced in children psychology, kindergardens education, I design some art lesson, with drawing or craft, helping to convery specific message for kids, like self value, understanding emotion some bible stories teaching about moral and attitude etc. For instance, we use doodle line drawing and fill with colour blocks, which is also commonly used in art therapy, helps them to express their feeling and imagination. In 2020, I joined a course introducing Expressive Arts Therapy hold by 香港中文大學 專業進修學院(CUSCS). It helps a lot for me, no matter in design or daily life, to express thoughts and ideas, and help clients to do so.
Due to the COVID-19, we changed to online class
Art & Craft workshop for Primary school students in Fuklam(Kwun Tong)Church
Thank you :)