Anky's Multimedia Design Portfolio 14-20

‘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 :)