Designing Cricket Widgets for Light and Dark Themes

In 2019, I explored how cricket information could be presented through a flexible system of compact UI widgets.

Cricket contains a large amount of constantly changing data—from live scores and recent deliveries to player statistics and match results. The challenge was to make this information easy to scan without overwhelming the user.

The concept

I designed a collection of reusable widgets for a cricket platform, covering different types of content:

• Live match scores
• Upcoming fixtures
• Completed match results
• Batting and bowling scorecards
• Recent delivery updates
• Player information

The widgets were designed to work individually or together as part of a larger mobile or web experience. Each component follows a consistent visual structure while adapting to the amount and type of information it contains.

Designing for quick scanning

Cricket fans often check scores while a match is in progress, so the most important information needs to be immediately visible.

Team names, flags and scores receive the strongest visual emphasis. Supporting information—such as match location, session updates, player roles and bowling details—is presented with a lighter hierarchy.

Colour is used selectively to communicate match status and recent events. For example, the live indicator draws attention to an active match, while coloured circles represent the outcome of recent deliveries.

Exploring light and dark themes

I created both light and dark versions to understand how the same information system could adapt to different viewing environments.

The light theme feels clean and editorial, while the dark theme creates a more focused experience for following live matches. Instead of simply reversing the colours, I adjusted contrast, borders, backgrounds and text hierarchy to maintain readability in both themes.

Building a flexible UI system

The exploration was not limited to designing a single screen. I wanted to create a modular system that could support different cricket scenarios while maintaining a consistent visual language.

The same design foundation could be used across mobile applications, websites, dashboards or embedded score widgets. Components could also be expanded or simplified depending on the available space.

Looking back

This exploration was designed on September 8, 2019.

Looking at it today, I appreciate how the project encouraged me to think beyond individual screens and focus on reusable UI patterns. The visual style reflects the period in which it was created, but the core principles remain relevant: clear hierarchy, scannable information, theme adaptability and consistency across components.