Example
HayleyConn
28 days agoCommunity Member
FAQ for IDOL Academy Onboarding
Hi everyone!
For this week’s challenge, I wanted to move beyond the standard "button-and-box" accordion. My entry is a custom-built interaction for IDOL Academy, focusing on a strict 2D brand implementation.
Instead of using heavy containers or 3D glass effects, I utilized IDOL’s Secondary Palette—specifically Sea Green (#42BA78) for the interaction lines and a Subdued Light Grey (#E1E1E1) for the background to create a sophisticated, airy feel.
What I focused on:
- Curved Continuity: Using organic, curved Sea Green lines to connect the accordion headers, creating a "visual map" of the project submission steps.
- Typography & Contrast: Following IDOL’s guidelines for Montserrat headings and Source Sans Pro body text, ensuring I hit the brand-required 3:1 contrast ratio for accessibility.
- Generous Negative Space: I removed all background shapes and logos to let the interaction breathe, adhering to the "Six Type Commandments" for a cleaner UI
I'd love to hear your thoughts on using green-on-green tints for professional layouts!
https://360.articulate.com/review/content/4a4d9baf-d4fe-4f86-99c6-bed1e9be98de/review
No RepliesBe the first to reply
