mobile wireframe
NAV DECISION: Sticky white nav bar, 60px height. Logo left, hamburger right.
Hamburger opens full-screen Navy overlay — not a slide-out drawer. Links animate in staggered.
Gold underline on hover/active. “Join In” CTA at the bottom of the overlay in Gold.
Touch target on hamburger: 44×44px minimum.
Instructional Design · Curated Showcase
Find the Right Course Designer
We build clear, creative, and effective learning experiences — custom-tailored to your audience and goals.
HERO DECISION: Bauhaus geometric band (CSS circles, no images needed) sits above
the text content — this IS the custom graphic language for the brand. Navy background with Teal, Coral,
Gold circles. Hero headline at 40px / 800 weight. “Right” in Coral for emphasis and hierarchy drama.
Two CTAs stacked full-width — primary filled, secondary outline. 15px padding = comfortable thumb target.
YourDesignSpot in Numbers
847
Designers
12M+
Monthly
Visitors
Visitors
2019
Founded
TRUST STRIP: Compact stats row — no cards, just numbers. 3-column flex.
Each stat number in a different brand color (Navy / Teal / Coral). Gray background separates
it from the hero without a hard line. No icons needed — the numbers carry the weight.
Our Story & Vision
Not an Agency. Not a Studio.
YourDesignSpot is a curated space where independent instructional designers showcase their work, share their process, and connect with like-minded creatives.
Our vision is to make great instructional design more visible, more valued, and more human.
The Difference
Every designer featured here owns their work — from the vision to the execution. Every design tells a story.
CONTENT SECTION: Eyebrow → H2 → Body → Callout. This is the standard
content rhythm for the site. H2 at 28px / 800 weight in dark text. Body at 16px / 1.75 lh.
Direct Answer callout (Surface A / Navy left border) for the key differentiator statement.
No images needed in this section — the copy does the work.
What You Get
A Creative Community
YourDesignSpot is more than a portfolio platform — it’s where instructional designers support, inspire, and elevate each other.
Showcase Your Style
Present your work the way you designed it — with the full context of your creative process.
Collaborate with Peers
Connect with a curated community of IDs who understand what you do.
Get Featured
Stand out on a platform built specifically for the craft of instructional design.
Stay Inspired
Browse real examples from designers pushing the boundaries of learning.
FEATURE CARDS — MOBILE: Single column stack with left-border accent (not top-border
as in desktop). Icon + text side by side. This is more readable on mobile than top-border cards which
need more vertical height. Left border color rotates through all 4 brand colors.
Desktop will go 2-col grid with top borders.
YourDesignSpot gave me a place to show my work the way I actually designed it — not stripped down into a bullet list on a resume.
Maria Chen
Learning Experience Designer · 12 years independent
QUOTE SECTION: Full Navy background — this is the “breathing moment” between
feature content and the CTA. Gold quote mark at 64px creates hierarchy drama. White body text
at 20px italic. Gold attribution. Bauhaus circles in background (CSS only, no images).
This is where the brand’s personality really shows.
Designer Commitment
Full Creative Freedom
We give our featured creators full freedom to present their work, their way.
What This Means
- You own your work — from vision to execution
- Present your process, not just your output
- No agency filters. No creative compromise
- Your portfolio, your voice, your way
SUMMARY STRIP: Surface B (soft teal bg) with teal left border and teal bullet dots.
Used here to package the “commitment” points without turning them into a generic bullet list.
This component appears in course content as “In This Module” — repurposed here as “What This Means.”
One component, multiple contexts.
A Creative Community of Instructional Designers
Bring Your Perspective
If you’re an ID with work you’re proud of, we’d love for you to join us. Show your style. Add your voice.
CTA SECTION: Teal background (not Navy — Navy is used for the hero and quote,
so Teal here creates variety without breaking the palette). White filled button, outline ghost
as secondary. Bauhaus circles in background. This is the conversion moment — everything above
builds to this. Two CTAs: primary action and a low-commitment alternative.
FOOTER: Deep Navy (#112550). Logo repeats. Short tagline (the brand statement).
4-color gradient bar separates the tagline from nav links — this is the only place the full
gradient runs full-width. Footer links in muted white. No social icons yet — add when confirmed.