This is a distinctive Bootstrap-based landing page for Learning Design Solutions, designed following Donald Miller's StoryBrand framework and avoiding generic Bootstrap aesthetics.
- Navy Blue:
#1e3a8a(Primary) - Lime Green:
#84cc16(Accent) - Coral Orange:
#f97316(CTA/Accent) - Dark Grey:
#1f2937(Text) - Light Grey:
#f9fafb(Backgrounds)
- Sharp corners (no border-radius)
- Clean typography: Inter (body) + Libre Baskerville (display headings)
- Asymmetric layouts to avoid generic Bootstrap patterns
- Three-color accent bars reflecting logo design
- Academic yet modern aesthetic
Place these images in the /images folder:
lds-logo-horizontal-white.png- Horizontal logo for dark navy navbarlds-logo-stacked-white.png- Stacked logo for footer
andrew-doig.jpg- Professional photo of Andrew Doig for About section- Suggested dimensions: 600x600px minimum
- Should show professionalism and approachability
- You can add individual client logos or use the composite image provided
- Place in
/images/clients/subfolder - Logos shown: Dyson, ICAS, GCU, Heriot-Watt, Future Learn, Reels, etc.
- Place in
Programme Directors, Deans, Digital Learning Managers at well-funded HE institutions
- External: Need to reach global online learners, limited internal capacity
- Internal: Frustration, tension between goals and capacity
- Philosophical: "Putting lectures online isn't enough - you need academic transformation"
Andrew Doig - 30 years academic experience, former Associate Professor, understands HE culture
Four clear steps: Consulting β Piloting β Planning β Building
- Direct: "Book a Consultation"
- Transitional: "Get Free Guide" (lead magnet)
Missing global market, poor-quality courses, stretched teams, damaged reputation
Maintain institutional identity whilst reaching global audiences with quality programmes
- Navigation - Sticky navy bar with green bottom border
- Hero - Navy gradient background, clear value proposition
- Problems - 6 problem cards with hover effects
- What Links Them - Educational explanation
- Empathy Quote - Bordered quote section
- About Andrew - Navy background, credentials
- What's Really Happening - 3-step cycle
- Our Approach - Asymmetric layout, backwash effect
- Process - 4 numbered steps
- Results - Case study teasers (navy background)
- Is This Right? - Two-column comparison
- FAQ - Accordion with custom styling
- Lead Magnet - Navy section with white form
- Contact - Process + form
- Footer - Dark with green accents
- British English throughout
- CEFR Level A2-B1 (simple, clear sentences)
- Friendly but professional tone
- Short paragraphs for readability
- Active voice
Andrew was very clear: LDS does NOT do digital transformation. They do academic transformation enabled by technology.
- Clients already have their platforms (VLE/LMS)
- The transformation is pedagogical, not technological
- "You've been teaching in classrooms for 150 years. We're going to rethink your approach to teaching."
- Private universities (fast decision-making)
- Chartered institutes (ICAS model)
- HE-adjacent organisations with funding
- NOT typical UK public universities (too slow procurement)
Both forms currently use JavaScript alerts for demonstration. Replace with your actual form handling:
Captures: Name, Email, Institution, Role
Captures: Name, Email, Institution, Message
- Bootstrap 5.3.2 via CDN
- Google Fonts: Inter + Libre Baskerville
- Fully responsive (mobile-first)
- Smooth scroll navigation
- No jQuery required (vanilla JavaScript)
- All CSS embedded in
<head>for single-file deployment
π Live Preview: https://serenichron.github.io/lds-landingpage/
This GitHub Pages deployment allows Andrew to preview the landing page before Squarespace integration.
This page was designed to be embedded in Squarespace. Options:
- Code Block: Paste entire HTML into a Code Block
- Custom Page: Use Developer Mode to create custom template
- Embed: Work with Steve (site maintainer) to integrate
- May need to extract CSS to separate file depending on Squarespace limitations
- Navigation might need adjustment to match existing site nav
- Forms should connect to Squarespace form handlers or external service (e.g., Mailchimp, HubSpot)
- See
../SQUARESPACE_INTEGRATION.mdfor full integration plan and API options
This page demonstrates distinctive Bootstrap design:
- β Uses Bootstrap grid and components as foundation
- β Heavily customized colors (not default blue)
- β Custom typography beyond Bootstrap defaults
- β Asymmetric layouts (not generic three-column cards)
- β Sharp corners throughout (not default rounded)
- β Strategic spacing variety (not uniform padding)
- β Hover effects and subtle animations
- β NO generic Bootstrap patterns
- β NO default color schemes
- β NO predictable layouts
- Custom Color Scheme: Navy, green, orange (not Bootstrap blue)
- Sharp Aesthetic: Zero border-radius throughout
- Asymmetric Layouts: Varied column widths, not predictable grids
- Typography Hierarchy: Large display headings vs body creates drama
- Accent Bars: Three-color bars reflect brand identity
- Navy Hero: Dark gradient hero (not light centered content)
- Educational Tone: Academic but modern (not corporate or tech startup)
- Add Images: Place required images in
/imagesfolder - Test Forms: Connect forms to your email/CRM system
- Review Copy: Ensure all messaging aligns with current positioning
- Add Analytics: Insert Google Analytics or tracking code
- Test Responsive: Check on mobile devices
- Squarespace Integration: Work with Steve to embed properly
- Add actual phone number in contact section
- Add Andrew Doig photo
- Add client logos section (composite image provided)
- Connect forms to actual backend
- Update any institutional names/details as needed
To update colors, modify CSS variables in :root:
:root {
--lds-navy: #1e3a8a;
--lds-green: #84cc16;
--lds-orange: #f97316;
/* etc */
}Contact Vlad for design/development questions. Contact Andrew for content/messaging questions.