TrendTickr - Website Design
Explore the site below - fully interactive.
Overview
A complete marketing website designed to introduce TrendTickr to potential users and investors. The site needed to communicate complex fintech concepts in an approachable way while establishing credibility and trust with a young, tech-savvy audience.
The design draws heavy inspiration from Apple's product pages - clean typography, generous whitespace, and subtle scroll-triggered animations that guide visitors through the narrative without overwhelming them.
Design Philosophy
The website was built around the principle of progressive disclosure - revealing information in digestible sections as the user scrolls. Each section builds on the last: from the bold "Launching Soon" hero, through the promo video, into feature highlights, and finally to a clear call-to-action for early access.
Glassmorphism effects and soft gradients create depth without clutter, while the purple brand colour (#5b21b6) provides consistent visual anchoring throughout the experience.
Technical Stack
- Structure: Semantic HTML5 with accessibility in mind
- Styling: Custom CSS with CSS Grid and Flexbox layouts
- Typography: SF Pro Display font family (Apple system font)
- Video: Plyr.js for custom video player controls
- Animations: Custom scroll-triggered animations via JavaScript
- Forms: Formspree integration for email capture
Software
- Design & Build: Adobe Dreamweaver
- Promo Video: Adobe Premiere Pro, After Effects
- Graphics: Adobe Photoshop
- Mockups: iPhone 16 Pro Max device frames
Brand Colours
Key Pages
- Homepage: Hero with logo and tagline, promo video section, app preview with iPhone mockups, feature cards, and email signup
- Whitepaper: Long-form technical document with table of contents, statistics cards, and PDF download
- Careers: Job listings and company culture information
- Thank You: Post-signup confirmation page
Responsive Approach
Mobile-first responsive design ensures the site works seamlessly across all devices. The three-phone mockup grid gracefully collapses on smaller screens, navigation links adjust spacing, and touch-friendly padding is applied throughout for mobile users.
Design Features
- Scroll Animations: Fade-in-up effects reveal content as users scroll, creating an engaging narrative flow
- Glassmorphism: Frosted glass effects on navigation and UI elements add modern depth
- Gradient Backgrounds: Subtle linear gradients transition between sections
- Custom Video Player: Plyr.js provides a branded video experience with iOS compatibility fixes
- Sticky Navigation: Fixed header with backdrop blur for persistent navigation
- Hover States: Smooth transitions on interactive elements (buttons, cards, phone mockups)
Promo Video
Unmute and view fullscreen for the best experience.
A 30-second promotional video created to build anticipation ahead of the platform launch. The video showcases the app's interface, key features, and value proposition in a fast-paced, visually engaging format.
Deployed across social media channels including X, Instagram, and LinkedIn to grow an audience and spark conversation within trading and fintech communities. The video served as the primary marketing asset during the pre-launch phase, driving early access signups and establishing brand presence before the product went live.
Produced using Adobe Premiere Pro for editing and After Effects for motion graphics, typography, and visual effects.
Related Project
The TrendTickr website is part of a larger brand identity project. View the platform design and backend development work: