Illustration Projects in WahIllustration Projects in WahTurning Complex Software into Visual Sales Assets
Generic templates don't convert savvy tech buyers. This premium SaaS explainer video was built to solve a specific problem: transforming complex, multi layered software features into a clear, high converting visual narrative that drives demo bookings.
Collaborating with a dedicated team, I led the motion design pipeline to create a polished, product led asset. Every transition, UI animation, and keyframe was engineered to hold attention, demonstrate immediate product value, and match the premium aesthetic expected by modern tech audiences.
The Goal: Reduce churn, explain complex UI seamlessly, and accelerate the sales cycle.
Specializations: SaaS Explainer Videos, 2D Motion Graphics, Product Demos
If your software is complicated but your value proposition shouldn't be, let's talk.
Explore my portfolio at muneebtalib.com (http://muneebtalib.com) or send a message directly on Contra to discuss how we can turn your product UI into a high converting growth tool.
Project: Award, Certification & Institutional Badge Collection
Scope: A range of recognition and badge marks across award, certification, education, event, and anniversary categories.
Delivered: Full-color and one-color variants, alternative web-safe formats where applicable, production-ready vector files (AI, EPS, SVG, PDF), transparent PNG exports.
Result: A demonstrated body of work across five distinct recognition-badge categories, each built for its specific real-world application, print, embroidery, signage, or digital.
Noor Afshan Al Aziz | Brand Identity Designer & Adobe Illustrator Production Specialist ๐ค Encore โ Your Sound, Verified
A concept demo built for the artist/fan/venue platform brief
๐ What This Is
Encore is a front-end concept demo โ a single-page, mobile-first web experience designed to show how the platform described in the brief could feel to use. It's not just a mockup of screens; it's a working, interactive build: real animation, real 3D motion, real responsive layout, all in the browser.
The goal wasn't to illustrate "a music app." It was to design around the actual problem stated in the brief: AI and infinite streaming have flooded the market, and the one thing that can't be faked is a room full of real people who showed up for one specific artist. Every design decision traces back to that idea.
๐ฏ The Core Idea (Signature Concept)
The centerpiece of the whole design is a simple visual metaphor:
Noise โ Signature
On page load, the hero section shows a waveform made of random, chaotic bars โ representing the flood of AI-generated tracks. Over about 2 seconds, it smoothly resolves into a clean, deliberate waveform shape โ representing a real artist's identity emerging from the noise. This one animation is the pitch: your sound survives the flood because it's yours.
That same idea โ human signal standing out against synthetic noise โ is echoed quietly throughout: in the copy, in the "verified" badges, and in the rotating light-ray silhouette behind the hero text.
๐จ Design System
Color palette (named, not generic defaults):
#0E0B12 Stage โ near-black background, like a dim venue
#161019 Stage 2 โ slightly lifted panel background
#1F1826 Card โ surface color for cards/passes
#FFB84D Amber โ warm spotlight accent
#B24BF3 Violet โ electric stage-light accent
#F5F0EB Paper โ main text color
#6EE7A8 Green โ small "verified/confirmed" indicator only
Typography (three roles, chosen for character, not defaults):
Fraunces (serif) โ headlines. Warm, a little vintage, feels human rather than corporate
Inter (sans) โ body copy. Clean, highly readable at small sizes
IBM Plex Mono โ tags, roles, timestamps, eyebrows. Gives a "verified/technical" feel to labels like CONFIRMED ยท MOBILE
Layout logic: every section either shows the brief's real content (roles, event lifecycle) or reinforces the noiseโsignature theme. Nothing decorative was added just to fill space.
๐งฉ Section-by-Section Breakdown
๐งญ Nav โ sticky, blurred glass background, quick links + waitlist CTA
๐๏ธ Hero โ the noiseโsignature waveform animation, headline built directly from the brief's own stat (750k tracks/day, 400k AI-made), rotating light-ray performer silhouette as ambient background
๐ The Problem โ three animated counting stats (53%, 750k, ~1%) pulled straight from the brief's numbers, plus one closing line of copy
๐ซ Who's In (Roles) โ three "backstage pass" style cards for Fan (guest โ registered โ confirmed), Artist (approved, Stripe-connected โ marked as the core role), and Local Business (approved, Stripe-connected). Each tilts in 3D toward the cursor
๐ Before / During / After โ the real event lifecycle from the brief, shown as a genuine numbered sequence (this is the one place numbering is justified, since order actually matters here)
๐ Real People, Real Rooms โ a horizontally scrollable roster of fictional artist cards (unique gradient avatars, genre, city) โ social proof without using anyone's real photo or name
๐ฑ The App โ a tilting phone mockup showing what a confirmed fan actually sees: artist card, live "audio bars," setlist voting, check-in button
๐๏ธ Footer โ simple sign-off
๐ ๏ธ What's Actually Used (Tech Stack)
HTML5 โ semantic structure, no frameworks
CSS3 โ custom properties (CSS variables) for the whole color system, Flexbox layout, clamp() for fluid type scaling, CSS mask-image for the fading carousel edges, keyframe animations
Vanilla JavaScript โ no libraries, no build step:
<canvas> + requestAnimationFrame for the waveform animation
IntersectionObserver for scroll-triggered stat counters and section reveals
Mouse-position math for the 3D tilt effect on cards and the phone
Inline SVG โ the hero performer silhouette and light rays, hand-built, no external image files
Google Fonts โ Fraunces, Inter, IBM Plex Mono
No dependencies, no npm install, no server required โ it's three files (index.html, style.css, script.js) that run with a static file server like VS Code's Live Server.
โจ Motion & Interaction Details
๐ Hero waveform: chaos โ order animation on load, then idles with a gentle breathing motion
๐ข Stats count up from 0 the moment they scroll into view
๐ Role cards & artist cards tilt in 3D toward the cursor, and lift slightly on hover
๐ฒ Phone mockup tilts in full 3D based on cursor position โ sells the "real device" feeling
๐ Background light rays rotate slowly and continuously โ ambient, not distracting
๐ช Sections fade/slide in as you scroll, instead of appearing all at once
You can check out my project live here: https://encore-demo-saifullah.netlify.app (https://encore-demo-saifullah.netlify.app/)
It is mobile and web-based. 
