︎
interactive production
appleminted
freelance design
love & hairsprayflounderers of alameda
heatherwood park
acme general engineering
california wildlife coalition
it’s a grind coffeehouse
platter ensemble
for fun
beer labelsredesigned book covers
paintings
motorcycle
contact me
CV ︎ ︎
During my 8 years in the graphic production team at apple marcom, my primary goal was to help ensure that our site continuously upheld apple’s design standards through high quality imagery and flawless implementation. To accomplish this, my responsibility was to take the guidance from both art directors and layout designers, and focus on the endless details pertaining to image quality. From here, I would polish design assets and hand them off to our developers, or publish them directly.
Primary Pages Contributed:
https://www.apple.com/
https://www.apple.com/mac/
https://www.apple.com/macbook-neo/
https://www.apple.com/macbook-air/
https://www.apple.com/macbook-pro/
https://www.apple.com/imac/
Below are various examples of the types of challenges we faced day-to-day.
***disclaimer: I did not create or produce the designs shown below
︎︎︎ Small details matter
Problem: Inconsistency
Observation:
As with many simple details that our audience may likely overlook, consistency is a quality that the production team takes seriously. Of the three ipods below, we observe that only the ipod pros in the center have grounding shadows. This may create a negative perspective from the audience and at the very least, present a lack of care for quality.
Treatment:
A structured approach can prevent this situation. This is an example of how much self auditing can make a difference.
Observation:
As with many simple details that our audience may likely overlook, consistency is a quality that the production team takes seriously. Of the three ipods below, we observe that only the ipod pros in the center have grounding shadows. This may create a negative perspective from the audience and at the very least, present a lack of care for quality.
Treatment:
A structured approach can prevent this situation. This is an example of how much self auditing can make a difference.
︎︎︎ Presentation should appear intentional
Problem: Alignment
Observation:
The phone notification is positioned closer to the right of the bezel, which does not reflect the UI behavior in the real world. The lack of symmetry appears unintentional because the sense of balance has been interrupted.
Treatment:
This is another example of how a structured approach to quality reviews can prevent poor presentation.
Observation:
The phone notification is positioned closer to the right of the bezel, which does not reflect the UI behavior in the real world. The lack of symmetry appears unintentional because the sense of balance has been interrupted.
Treatment:
This is another example of how a structured approach to quality reviews can prevent poor presentation.
︎︎︎ We can’t entirely lean on our technology tools
Problem: Alignment
Observation:
The ipad is not horizontally centered to the space. The ipad and the cast shadow together may mathematically be centered, but we must always consider the user experience when it comes to layout. I’ve seen many examples of this when reviewing build updates. While a design program may calculate the image asset as centered, it is the audience that will determine the experience at the end.
Treatment:
This is another example of how a structured approach to quality reviews can prevent poor presentation.
Observation:
The ipad is not horizontally centered to the space. The ipad and the cast shadow together may mathematically be centered, but we must always consider the user experience when it comes to layout. I’ve seen many examples of this when reviewing build updates. While a design program may calculate the image asset as centered, it is the audience that will determine the experience at the end.
Treatment:
This is another example of how a structured approach to quality reviews can prevent poor presentation.
︎︎︎ It is ok if the answer is not obvious at first
Problem: Alignment
Observation:
The network logos at the bottom left of the layout are misaligned. Varying dimensions can present a challenge when it comes to consistency. The method of approach can be determined by the art director but we can also reach a level of understanding on our own. Is it more effective to align the logos to the top left corner? Maybe the baseline? Perhaps the relative center?
Treatment:
The important takeaway here is that some challenges are best approached as a team, with multiple perspectives offered. Through observation of different options, a collaborative review can achieve the effectiveness and direction needed.
Observation:
The network logos at the bottom left of the layout are misaligned. Varying dimensions can present a challenge when it comes to consistency. The method of approach can be determined by the art director but we can also reach a level of understanding on our own. Is it more effective to align the logos to the top left corner? Maybe the baseline? Perhaps the relative center?
Treatment:
The important takeaway here is that some challenges are best approached as a team, with multiple perspectives offered. Through observation of different options, a collaborative review can achieve the effectiveness and direction needed.
︎︎︎ Small details matter
Problem: Aliasing
Observation:
There is a jagged outline presenting on the left airpod, which is unintended. We understand that aliasing is the limitation of the pixel’s ability to resolve the edges of images, causing stair-stepping or a jagged distortion.
Treatment:
While the method here cannot be revealed, a nuanced adjustment can be applied so that the outer part of the airpod can appear smooth as intended.
Observation:
There is a jagged outline presenting on the left airpod, which is unintended. We understand that aliasing is the limitation of the pixel’s ability to resolve the edges of images, causing stair-stepping or a jagged distortion.
Treatment:
While the method here cannot be revealed, a nuanced adjustment can be applied so that the outer part of the airpod can appear smooth as intended.
︎︎︎ Pixel perfection is a big goal for web
Problem: Clipping
Observation:
More often than not, iconography for web requires a high attention to detail and can be very sensitive to the constraints of pixels, especially at a small scale. Strokes and lines are at risk of being cropped or having unintended outcomes. In both instances of the icons, we observe some ‘blurriness’ with the line definition and subpixel occupation of the artwork. The left icon presents less so, but in both cases, more refinement can be achieved.
Treatment:
When dealing with icons at a small scale, honing in on grid alignment and subpixel behavior makes all the difference.
**Included are other iconography examples where the same requirements are paramount.
Observation:
More often than not, iconography for web requires a high attention to detail and can be very sensitive to the constraints of pixels, especially at a small scale. Strokes and lines are at risk of being cropped or having unintended outcomes. In both instances of the icons, we observe some ‘blurriness’ with the line definition and subpixel occupation of the artwork. The left icon presents less so, but in both cases, more refinement can be achieved.
Treatment:
When dealing with icons at a small scale, honing in on grid alignment and subpixel behavior makes all the difference.
**Included are other iconography examples where the same requirements are paramount.
︎︎︎ Unexpeced results are always possible
Problem: Moiré
Observation:
A common challenge we encounter with many renderings of the macbook speakers is moiré. This is an optical phenomenon that occurs when patterns overlap, creating new, wavy, or undesired patterns. In this example, we see boxes if left untreated.
Treatment:
By managing the image resolution and compression, we can mitigate and sometimes nullify this phenomenon.
Observation:
A common challenge we encounter with many renderings of the macbook speakers is moiré. This is an optical phenomenon that occurs when patterns overlap, creating new, wavy, or undesired patterns. In this example, we see boxes if left untreated.
Treatment:
By managing the image resolution and compression, we can mitigate and sometimes nullify this phenomenon.
︎︎︎ Photo quality is paramount
Problem: Artifacts
Observation:
The image with artifacts has unwanted, visible pixel information caused by encoding compression. Smooth areas of solid color and areas with gradients appear to have blocks of colors.
Treatment:
By managing the image compression, or even sourcing higher quality images, we can mitigate and sometimes nullify this phenomenon.
Observation:
The image with artifacts has unwanted, visible pixel information caused by encoding compression. Smooth areas of solid color and areas with gradients appear to have blocks of colors.
Treatment:
By managing the image compression, or even sourcing higher quality images, we can mitigate and sometimes nullify this phenomenon.
︎︎︎ Excellence is worth the effort
Problem: Banding
Observation:
This is perhaps one of the most difficult challenges we face with static images, so much so that I’ve created and hosted a workshop for other senior designers in mitigating this issue. In this example, we see that the gradient displays banding, which is an undesired image affect on web, caused by gradients, combined with technology limitations and resolution constraints.
Treatment:
While the method here cannot be revealed, a nuanced treatment can be applied so that the striping affect we see becomes dithered, resulting in a smoother outcome. **the dither effect in photoshop is not part of the complex solution =).
Observation:
This is perhaps one of the most difficult challenges we face with static images, so much so that I’ve created and hosted a workshop for other senior designers in mitigating this issue. In this example, we see that the gradient displays banding, which is an undesired image affect on web, caused by gradients, combined with technology limitations and resolution constraints.
Treatment:
While the method here cannot be revealed, a nuanced treatment can be applied so that the striping affect we see becomes dithered, resulting in a smoother outcome. **the dither effect in photoshop is not part of the complex solution =).
︎︎︎ Don’t ignore the basics
Problem: Proofreading
Observation:
This is probably the most simple issue to encounter, but a big no-no if published. If the audience is exposed to basic misspelling issues, there can be larger consequences than imagined. Overlooking a spelling mistake can really distrupt a user’s experience, which can be the difference between a product purchase or a pass.
Observation:
This is probably the most simple issue to encounter, but a big no-no if published. If the audience is exposed to basic misspelling issues, there can be larger consequences than imagined. Overlooking a spelling mistake can really distrupt a user’s experience, which can be the difference between a product purchase or a pass.
︎︎︎ Context matters
Problem: Contextual inconsistency
Observation:
At first blush, some issues may go unnoticed. I’m sure some audience members can observe this image and see no problems, but after taking a closer look, we observe that the messaging here is describing how the Airpods Max is great in controlling media. However, the screen content is communicating on a different topic and is therefore out of place. These inconsistencies matter!
Observation:
At first blush, some issues may go unnoticed. I’m sure some audience members can observe this image and see no problems, but after taking a closer look, we observe that the messaging here is describing how the Airpods Max is great in controlling media. However, the screen content is communicating on a different topic and is therefore out of place. These inconsistencies matter!
︎︎︎ Consistency and precision key
Challenge: Galleries & repeating assets
Observation:
On various pages, we had to created galleries that consist of the same exact hardware using the same scale, control angle and alignment. While the screens were varied and unique, the hardware was to be repeated with no difference.
Treatment:
To implement this correctly and in the manner that our developers preferred, I had to use one hardware asset (in this case the iphone), either with a knockout of the screen content or with a mask, so that the build could stay within a memory threshold while simultaneously presenting many examples of iphones and screens. Essentially, all instances of the iphone seen in the example are sharing the same hardware and mask assets, therefore loading it once and no more.
The mask and/or knockout had to be pixel perfect, so that when the screens and hardware were positioned in code, there would be no gaps between the mask and hardware content. For this process, dimensions were exact and deliberate and some math was required.
**Directly below the phone gallery is a similar example but using the macbook air. When toggling between colorways, the images should remain in the same position without moving or jumping positions, hence the need for precise positioning within image exports.
Observation:
On various pages, we had to created galleries that consist of the same exact hardware using the same scale, control angle and alignment. While the screens were varied and unique, the hardware was to be repeated with no difference.
Treatment:
To implement this correctly and in the manner that our developers preferred, I had to use one hardware asset (in this case the iphone), either with a knockout of the screen content or with a mask, so that the build could stay within a memory threshold while simultaneously presenting many examples of iphones and screens. Essentially, all instances of the iphone seen in the example are sharing the same hardware and mask assets, therefore loading it once and no more.
The mask and/or knockout had to be pixel perfect, so that when the screens and hardware were positioned in code, there would be no gaps between the mask and hardware content. For this process, dimensions were exact and deliberate and some math was required.
**Directly below the phone gallery is a similar example but using the macbook air. When toggling between colorways, the images should remain in the same position without moving or jumping positions, hence the need for precise positioning within image exports.
︎ Animation collaboration
The bulk of my graphic production work involved handling static images and all the details. As a senior artist, I was also tasked with supporting our motion graphics department, who’s main duty was to provide animation assets for developers. This was a great responsibility, as the stakes were high and many co-dependancies meant excellent implementation was necessary, early in the project timeline.
To support the motion graphics department and developers animating via code, I had to ensure that dimensions were spot on, the image sizes were an effectively balanced, deliverables were multilayered, and spec requirements were quite particular and narrow. Animators required animation fallbacks, multiple assets that interacted together, and assets for different viewport sizes.
Here are a few examples where I supplied our motion graphics team with multilayered assets for animations. Assets included very specific dimensions that interacted with video animations, such as svg/png masks, knockout treatments, exploded screen and hardware images, and oversized but compressed and high quality assets at scale. These assets were used for video animations, code animations, parralax effects on scroll, dramatic scaling on scroll, and more.
Every asset we provided were required to have a balance of the highest quality, while maintaining a lean memory budget to ensure that the page loads beyond reasonably for slower connections and various other viewing environments.
On many occasions, due to either scope adjustments, creative changes, and approach corrections, the iterative process required multiple re-deliveries from scratch.
︎︎ Masking & Animations
Projects:
macOS Tahoe hero animation
studio display animation
macbook neo animation
macOS Tahoe animation
macOS Tahoe parralax animation
mac mini scale animation
Challenge:
Deliver multilayered assets that interacted together with video assets and code. Each animation used a complex mask that was a very specific dimensions and shape.
macOS Tahoe hero animation
studio display animation
macbook neo animation
macOS Tahoe animation
macOS Tahoe parralax animation
mac mini scale animation
Challenge:
Deliver multilayered assets that interacted together with video assets and code. Each animation used a complex mask that was a very specific dimensions and shape.
Projects:
apple maps
Challenge:
Deliver a specific map area from apple maps in both day and night. Given that this was used for the background using parralax, the size was extremely large and thus proving to be an immense compression undertaking.
apple maps
Challenge:
Deliver a specific map area from apple maps in both day and night. Given that this was used for the background using parralax, the size was extremely large and thus proving to be an immense compression undertaking.