Example

HayleyConn's avatar
HayleyConn
Community Member
28 days ago

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

Getting Started with the E-Learning Challenges

Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.