Hi, I'm Jerome Cheng

I'm a Multimedia Designer

I always want to make connections. When you find the right way to make a connection you don't need to be fancy, intricate, detailed or otherwise. I just hope that with whatever I design, the audience finds something relatable. Empathy drives a lot of what I do. My work is informed by how people react to it. I always want to understand what works and find the right alternatives if it doesn't. Finally, I want everything I make to have purpose. Whatever choices I make or things I add have to make logical sense. Not just design for design's sake.

I aim to design content that is empathetic and purposeful.

My Work

<< BACK

Meet Your Career Advisers

Meet Your Career Advisers

The Project

Create a sitcom style opening to introduce the career advisers at the Humber Career Centre.

The Plan

The style was intended to be like 80/90s style openings, which I grew up on. I revisited a lot of them via YouTube clips and tried to catch certain tropes that could be used for the filming. For location, I made my way around the Humber campus to find local settings that can be used. This production process was done mostly on my own, so camera testing required me to film myself.

Here's that test:

I'm not an actor. But, I got a good idea of what I'd want to get out of the advisers when we got to that stage.

The Result

Credit to the talent involved. I was meeting most of the advisers for the first time in person on our day of shooting. Schedules were tight and so we would have to get to know each other and plan mostly on the spot. For my part, I tried to keep a friendly disposition to keep a light set. I'd encourage and hopefully made them feel comfortable in front of the camera. The whole filming was a very smooth process.

The production was a big hit both at the career centre and around campus. I got a lot of recognition not only from my team but faculty and staff around Humber since it was played across campus screens. It was a great learning experience and even better that we were so happy with the final result.

What I Learned:

  • Working with others: Up to this point, everything I've worked on involved people I knew previously. Working with people I have never met and on short notice was a great learning experience. It really developed my skills of adapting on the fly.
  • Colour grading: I tried DaVinci Resolve for the first time working on this. It was a new tool that was fun to learn. Really powerful stuff. Even got to do some motion tracking for the colour correction.
    Screenshot of DaVinci Resolve interface
  • Scoring: A big part of the post was finding the right song for our sitcom opening. It was a process. We aimed pretty big for a bit trying to gain rights to the Full House theme song and that became my first taste of exploring music licensing. That was way out of our budget though, so we made due with royalty free material. Here is a version that could never be:

Yap App

Yap App

The Project

Working with a partner, we planned, designed and prototyped a messaging app.

The Plan

The decision of what type of messaging app could have gone one of two ways.

  1. A niche messaging app that targets a particular group or particular type of messaging (such as Snapchat)
  2. A messaging app designed based on what we have encounted in our experience and we gather from user experiences.

We spent a lot of time interviewing students on their messaging preferences and researching/brainstorming niche messaging options. In the end, we decided that we could not find a niche option that expanded out of novelty and therefore moved forward redesigning a general messaging app.

Here were our objectives:

  • Minimal screens: We want our chat experience to be limited to one screen. Most messaging apps have the contacts and chat screens separate. We wanted to keep them to keep them in one screen and allow seamless changes between chats/contacts.
  • Shared media: A big part of our chat experience is the sharing of various forms of media. Traditionally, they are photos and video. We wanted to expand that to Instagram, links, files and map locations.

The Result

The app turned out mostly the way we had planned on. We were able to put together a pretty accurate prototype on Proto.IO. In terms of design, we achieved the clean look we aimed for and got our chat experience isolated to one screen. The scrollable contacts bar was a big part in making it happen. As for shared media, it is available in each specific chat through a swipe and includes all the mediums we wanted to add.

What We Learned:

  • Usability vs Real Estate: In wireframing all the way to final design, we worked a lot to find a balance of keep our app usable in the available screen real estate we had. It was especially difficult because of our goal of limiting the amount of screens. Because we wanted everything on a single screen, that also meant we had to fit functionality that traditionally stretched across multiple screens into a single one. Our big roadblock was with the shared media. In our user tests, we found that the swipe to display was not intuitive to the user. Options such as icons or buttons were considered, but we didn't not want to compromise more space for it. In the end, we want to keep our design and instead offer tooltip-like information when onboarding the user.
  • Prototyping software: To prototype our app, we first used Adobe Experience Design. In general, it was useful to help navigate from screen to screen, but to show the full functionality of our app, we needed a tool that allowed for layered prototyping. We created a new prototype through Proto.IO. Proto gave us the functionality to show our app as intended, specifically in allowing for a scrollable contact section within the screen.

My Shoe Closet

My Shoe Closet

To see my unhealthy obsession with shoes, visit here

The Project

Design and develop a responsive webpage.

The Plan

I knew I wanted to use a grid layout with flex box. The key was trying to figure out a collection of things that could be placed in there. Then it hit me:

Air Foamposite One Northern Lights

The short story is I have a lot of shoes and I always take photos of them. Why not create a gallery to highlight them?

The Result

I got a nicely layout page with all my shoes. The start point for it was actually this portfolio. Then, while working on that, I came up with new ideas to hash out the portfolio layout, specifically the mobile view.

What I Learned:

  • Flex-box: Basically, I have broken up with floats. Until this point, that was the only way I knew to create grid-like layouts for a page. But anyone who has played with floats know that it can be a funky business. With flex-box, I feel I have more control and calculating widths and margins is much more intuitive.
  • A unique mobile view: Until this point, responsive design for me was just moving and resizing based on the screen size. On this project, I worked to create a mobile experience that was intuitive to the screen size. It resulted in two things:
    1. Layout: Before this, the layout of the mobile would just be taking the square tiles of larger views and layering them out into a single column. The issue I have with this is that it takes up too much verticle space. As such, I completely change the tiles into rectangles with a shorter height. It makes it way better to scroll through.
    2. Detailed view: Each tile, when clicked, will open up a detailed description. On desktop and tablet, it will create a fade in overlay. For mobile, I thought it would cool to try a more app-like effect and instead moved the detailed description into a panel off screen that would slide in from the left.

Humber College

Humber College

The Project

Film, edit and narrate a fake Humber College Multimedia Design and Development commercial using a pre-written script.

The Plan

We were provided a script from our instructor and in it, it listed specific places and courses. As such, we had the freedom to choose spots around campus and activities to film that would best depict what was written.

We scouted locations around school first before going into filming. While we did not storyboard, we collected notes on where we would film and how.

The Result

We managed to put together a video that well depicts the script and captures at least some of the overall Humber brand. It was voted best in class.

What We Learned:

  • Manual focus: This was one of our first projects using a DSLR camera. We had used them before but not without the training we were given this time around. Shots were composed for the first time using manual focus, allowing us to capture the correct exposure as well as depth of field. Further, we got to try some pull focus shots for the first time.
    Pull focus at Starbucks
  • Angles and lines: Also a part of composition, we experimented more with the use of high and low angles as well as leading lines. This created some great looking shots that we had not done in previous work.
    Leading line shot in computer lab with three students
  • "Multi-cam": We were given the challenge to include one shot that continues the scene from different angles, creating a multi-cam look. The trick though was we had to figure out how to do it with just one camera. This meant not only recreating the scene from different angles, but also keeping the audio consistent.
    Two photos showing multi angle
  • Audio: This was our first project using a boom mic to capture our narration. Up until this point, we either recorded straight from the camera or added it via narration in post production. This created a fuller set feel and gave us experience working with separate video and audio sources when editing in post.

Meme Generator

Meme Generator

Visit my meme generator here

The Project

Create a webpage that uses HTML canvas.

The Plan

Much of my Internet activity is either browsing or creating memes. Group chats are ripe with them and the quicker I am able to respond with a custom meme, the better. With HTML canvas, I would be able to write a page that would allow me to do exactly that. Using JavaScript to take text entry and dynamically add it to the image allows me to quickly customize an image. Apps and sites have this functionality, but I just found that either adding text was too complex or if simple, I'd have to deal with watermarks. So, why not make my own meme generator?

'Aliens' meme with caption 'canvas'

Here's how it would work:

  1. User can upload any image from their device
  2. Captions can be added at the top and bottom of the image in a traditional meme style
  3. Updated image can be downloaded back to device

The Result

Despite it's novelty, it's one of my most used sites because of just how often I like to create these. The site works exactly as I need. It does just the one thing, but very well.

What I Learned:

  • HTML5 Canvas: Some fun stuff that you can do with this (case in point). I realized that this is likely how all the webpages out there work for captioning and to be able to design one for my own was great.
  • Cross-origin resource sharing (CORS): Initially, this site worked where you could pull in an image via URL. That was until I encountered CORS issues. I never knew about this before working on this site, but basically understood that content used needs to either be on the same domain or added via user action (uploaded). This small compromise was no issue for keeping full functionality.
  • Multi-line support: I had two ways I was going to handle longer messages. Either reduce the font size or push text to the other line. I ended up going with the latter. Figuring this out involved some math. Dynamically calculate the width of the image and set a threshold on number of characters that would fit on a line. After calculated, some loops and string functions and got that to work.

Polaroid

Polaroid

Visit my Polaroid page here (best viewed on Chrome)

The Project

Create a webpage that uses an HTML API (device orientation, device motion, geolocation, getUserMedia) and CSS animation.

The Plan

Create a webpage that would take your photo and "print" it out of a Polaroid style camera.

Polaroid camera printing a slice of swiss cheese

Some notes:

  • Be like a Polaroid: Wanted an "old school" feel when you took photos and didn't get to see how they look until they were developed. So, unlike the traditional getUserMedia use, I did not make the video element visible so the user could see themselves as they took their photo.
  • CSS Animations: Use 3D transformation to create the photo printing effect.
  • Mobile-friendly: Originally, this was built for desktop. Wanted to add responsiveness so it could be used on a tablet and phone.

The Result

The site worked very well. There was some tricky business in keeping the CSS animations responsive. Added CSS filters to create more of a Polaroid effect. The novelty of hiding the viewfinder made for a fun site to play with.

What I Learned:

  • getUserMedia constraints: getUserMedia is a powerful tool, but has its limitations. I found that the particular hardware and browser will allow for only particular resolutions. Because of this, I constrained my camera to standard resolutions to ensure it could be used across most browsers and devices. Additionally, I positioned photos to appropriately capture the middle of the frame since it cannot be framed in a viewfinder.
  • Added features: Because Polaroids tend to be very fun to use as a novelty, I want to be able to add more things like stickers or written captions. This is something I might work on adding later on.

MORE TO COME

Lego Builder

Contact Me