Countdown Module
Interface Design, Web Design
2025
@
StudioGOOD
Client
digital.global
Project type
Client Work
Role
Working Student
Scroll
Countdown Module
Interface Design, Web Design
2025
@
StudioGOOD
Client
digital.global
Project type
Client Work
Role
Working Student
Scroll
Countdown Module
Interface Design, Web Design
2025
@
StudioGOOD
Client
digital.global
Project type
Client Work
Role
Working Student
Scroll
Summary
As a working student at StudioGOOD, I designed a countdown module for digital.global. The goal was to promote the upcoming Hamburg Sustainability Conference directly on the Homepage.
Summary
As a working student at StudioGOOD, I designed a countdown module for digital.global. The goal was to promote the upcoming Hamburg Sustainability Conference directly on the Homepage.
Summary
As a working student at StudioGOOD, I designed a countdown module for digital.global. The goal was to promote the upcoming Hamburg Sustainability Conference directly on the Homepage.
Context
digital.global is a platform by the German Federal Ministry for Economic Cooperation and Development (BMZ), focusing on digital transformation in international development policy. The website highlights global initiatives, technologies, and stories that shape a more inclusive digital future.
Context
digital.global is a platform by the German Federal Ministry for Economic Cooperation and Development (BMZ), focusing on digital transformation in international development policy. The website highlights global initiatives, technologies, and stories that shape a more inclusive digital future.
Context
digital.global is a platform by the German Federal Ministry for Economic Cooperation and Development (BMZ), focusing on digital transformation in international development policy. The website highlights global initiatives, technologies, and stories that shape a more inclusive digital future.
Visual System & Style
To ensure a seamless integration into the existing design system, I followed the official style guide of digital.global. The typography is based on IBM Plex Sans, using Bold for emphasis and Regular for supporting text. This clear typographic hierarchy reinforces consistency, readability, and a structured visual rhythm throughout the module.
The color palette reflects the brand’s identity. The dark violet background of the website provides a calm and solid foundation. For the countdown tiles, I used the bright and striking blue (#0539E3) to ensure visibility and focus. The vibrant green (#2BC582) serves as an accent color for call-to-action elements like buttons, while white (#FFFFFF) supports contrast and readability across all text elements. By staying within this defined visual system, the countdown module becomes a natural and coherent part of the site.
Visual System & Style
To ensure a seamless integration into the existing design system, I followed the official style guide of digital.global. The typography is based on IBM Plex Sans, using Bold for emphasis and Regular for supporting text. This clear typographic hierarchy reinforces consistency, readability, and a structured visual rhythm throughout the module.
The color palette reflects the brand’s identity. The dark violet background of the website provides a calm and solid foundation. For the countdown tiles, I used the bright and striking blue (#0539E3) to ensure visibility and focus. The vibrant green (#2BC582) serves as an accent color for call-to-action elements like buttons, while white (#FFFFFF) supports contrast and readability across all text elements. By staying within this defined visual system, the countdown module becomes a natural and coherent part of the site.
Visual System & Style
To ensure a seamless integration into the existing design system, I followed the official style guide of digital.global. The typography is based on IBM Plex Sans, using Bold for emphasis and Regular for supporting text. This clear typographic hierarchy reinforces consistency, readability, and a structured visual rhythm throughout the module.
The color palette reflects the brand’s identity. The dark violet background of the website provides a calm and solid foundation. For the countdown tiles, I used the bright and striking blue (#0539E3) to ensure visibility and focus. The vibrant green (#2BC582) serves as an accent color for call-to-action elements like buttons, while white (#FFFFFF) supports contrast and readability across all text elements. By staying within this defined visual system, the countdown module becomes a natural and coherent part of the site.
Design Approach
The task was to develop a clearly structured and visually accessible countdown that leads up to the Hamburg Sustainability Conference (2–3 June 2025) and integrates seamlessly into the homepage of digital.global. I created a tile-based layout for the time units – days, hours, minutes, and seconds – and arranged them in a horizontal sequence for optimal readability.
Each unit sits in a square blue tile with centered white text. The labels (“TAGE”, “STUNDEN” etc.) are set in IBM Plex Sans Regular, while the numbers use the Bold style to draw attention. The strong contrast between type sizes, weights, and background color ensures high legibility, even at a glance.
To the right of the countdown, I placed a clear textual block including the event title and date. Below that, a bold green button (“MEHR ERFAHREN”) invites users to engage further. The layout and visual hierarchy guide the viewer’s eye naturally from the countdown to the call-to-action.
Design Approach
The task was to develop a clearly structured and visually accessible countdown that leads up to the Hamburg Sustainability Conference (2–3 June 2025) and integrates seamlessly into the homepage of digital.global. I created a tile-based layout for the time units – days, hours, minutes, and seconds – and arranged them in a horizontal sequence for optimal readability.
Each unit sits in a square blue tile with centered white text. The labels (“TAGE”, “STUNDEN” etc.) are set in IBM Plex Sans Regular, while the numbers use the Bold style to draw attention. The strong contrast between type sizes, weights, and background color ensures high legibility, even at a glance.
To the right of the countdown, I placed a clear textual block including the event title and date. Below that, a bold green button (“MEHR ERFAHREN”) invites users to engage further. The layout and visual hierarchy guide the viewer’s eye naturally from the countdown to the call-to-action.
Design Approach
The task was to develop a clearly structured and visually accessible countdown that leads up to the Hamburg Sustainability Conference (2–3 June 2025) and integrates seamlessly into the homepage of digital.global. I created a tile-based layout for the time units – days, hours, minutes, and seconds – and arranged them in a horizontal sequence for optimal readability.
Each unit sits in a square blue tile with centered white text. The labels (“TAGE”, “STUNDEN” etc.) are set in IBM Plex Sans Regular, while the numbers use the Bold style to draw attention. The strong contrast between type sizes, weights, and background color ensures high legibility, even at a glance.
To the right of the countdown, I placed a clear textual block including the event title and date. Below that, a bold green button (“MEHR ERFAHREN”) invites users to engage further. The layout and visual hierarchy guide the viewer’s eye naturally from the countdown to the call-to-action.
Conclusion
The countdown module blends seamlessly into the visual identity of digital.global while effectively drawing attention to a key event. As part of this project, I was able to introduce a new UI element directly on the homepage, extending the existing layout in a meaningful and consistent way. This experience gave me the opportunity to translate functional requirements into a clean and accessible UI solution within an established design system.
Conclusion
The countdown module blends seamlessly into the visual identity of digital.global while effectively drawing attention to a key event. As part of this project, I was able to introduce a new UI element directly on the homepage, extending the existing layout in a meaningful and consistent way. This experience gave me the opportunity to translate functional requirements into a clean and accessible UI solution within an established design system.
Conclusion
The countdown module blends seamlessly into the visual identity of digital.global while effectively drawing attention to a key event. As part of this project, I was able to introduce a new UI element directly on the homepage, extending the existing layout in a meaningful and consistent way. This experience gave me the opportunity to translate functional requirements into a clean and accessible UI solution within an established design system.
