1. Introduction

Overview

For this challenge, I created a custom icon specifically designed for an e-commerce application on a smartphone. The goal was to develop a visually appealing and functional icon that reflects the essence of the app while ensuring it stands out on mobile devices.

The design process focused on simplicity, clarity, and representing the core features of e-commerce, such as shopping and convenience, to enhance user engagement and recognition at first glance.

2. Design Process

The icon I designed was inspired by various Halloween mascots, incorporating a festive theme while maintaining the functionality of the e-commerce app's icons.

For instance, in the favorite icon, I creatively added a Frankenstein mascot to give it a Halloween twist.

This approach allowed me to blend the spooky and playful elements of Halloween with practical iconography, enhancing the app’s overall appeal during the Halloween season without sacrificing usability.

Style Selection

The design styles I selected for the icons were two distinct approaches: Line Style and Filled Line.

I used the Line Style for inactive icons, giving them a clean, minimal look, while the Filled Line style was applied to active icons, making them more prominent and visually engaging.

This differentiation between active and inactive states enhances user interaction, as it clearly indicates which features or functions are currently in use, while maintaining a cohesive and polished visual aesthetic throughout the app.

3. Rules & Accessibility

Colors

The color palette I chose was inspired by the natural tones of a pumpkin. For example, I used "Vivid Tangerine," which reflects the vibrant orange color of the pumpkin itself, and "Light Beige," which was derived from the soft, neutral hue of pumpkin seeds.

These colors not only evoke a strong Halloween theme but also create a warm and inviting feel, helping to establish a cohesive and festive visual identity for the icons while ensuring they remain visually appealing and functional within the e-commerce app.

Detail

The icon I designed was initially created on an artboard with dimensions of 48px x 48px, allowing for detailed and precise design work. I then adjusted the icon as needed for smaller sizes, such as 24px x 24px, to ensure it retained clarity and functionality, even at reduced dimensions.

For instance, the “Favourite” icon was resized and optimized to maintain its recognizability and appeal at 24px, ensuring that the icon works seamlessly across different interface sizes while preserving its design integrity.

4. Light & Dark Mode

For light mode, I used the same color palette as described earlier, including the "Vivid Tangerine" and "Light Beige" inspired by the pumpkin. However, for dark mode, I made slight adjustments to the orange hue to ensure it remains vibrant without appearing too dark against the darker background.

This subtle modification ensures the icons maintain good visibility and contrast in dark mode, enhancing usability. I also tested the icons in both light and dark mode within the application to ensure they perform well visually and maintain consistency across different themes.

5. Final Solutions

And finally, here are all the icons I created, including both the regular and Halloween-themed versions. As an example of the transformation, the normal "Favourite" icon shifts into a Halloween-themed icon by incorporating the Frankenstein mascot.

This approach demonstrates how functional icons can seamlessly transition to a festive theme while retaining their core functionality, adding a playful and seasonal element to the user experience. The Halloween-themed icons maintain clarity and usability, ensuring a smooth visual experience for users during the holiday season.