Look like a top agency
Modern, confident design with motion in every section — on brand, with the DigitalNgage orange.
← All work
Case study · Agency website · Design & development
An agency website that sells the agency
DigitalNgage is a digital marketing and technology agency. Its old site was a single page that showed and hid sections with JavaScript. I rebuilt it as a 13-page, fully animated website with a page for every service, real client case studies, articles and a lead form that works — and it still runs on simple shared hosting.
- ClientDigitalNgage
- IndustryDigital marketing agency
- My roleDesign, development & deployment
- Live websitedigitalngage.com ↗
13pages, each with its own URL
12services, each with its own section
2in-depth client case studies
3articles with a desktop reading layout
The challenge
A capable agency with a template-looking site
DigitalNgage runs social media, ads, SEO and websites for its clients — and also builds e-commerce stores and custom CRM software. None of that showed on its own website.
01
One page pretending to be five
All “pages” lived in one index.html and were shown or hidden with JavaScript. Every section shared one URL, so nothing could be shared or found on Google on its own.
02
No proof of work
Only six services in short cards, and no case studies — even though the team had built the KIO Organics store and the Metro CRM.
03
A contact form that misbehaved
Stray characters after the closing PHP tag meant the form's reply was not valid JSON, and the email's Reply-To line took the visitor's input without checking it.
04
Didn't feel like a top agency
Static layout, emoji icons and no motion — the site didn't match the quality of the work.
Before
The previous site: one page, six services, no case studies.
The brief
“Latest, dynamic, fully animated — animation in every section. It should feel like a top digital marketing agency, with every page a marketing website needs.”
— DigitalNgage, in the project briefShow the real work
Full case studies for the KIO Organics e-commerce store and the Metro CRM software, built from the original project write-ups.
Everything an agency site has
Services, portfolio, about, packages, insights, contact and FAQs — as separate, shareable pages.
Design system
Built from the DN logo
The palette starts from the orange in the DigitalNgage mark, set against a deep ink and a warm paper white. Dark and light sections alternate down every page, so long pages never feel flat. The client preferred flat brand colours, so there are no gradients.
Brand orange#FF5A1F
Ink#0A0A14
Paper#FFF8F3
Amber#FFB020
Violet#7C4DFF
Sora ExtraBoldHeadlines
Instrument SerifAccent words
DM SansBody text
The DN mark is also the site's favicon and home-screen icon.
Home page
A home page that tells the whole story
From the first headline to the footer, every section answers one question a prospect has: what do you do, who for, how, and why you.
01 — Hero
A headline that keeps moving
“We make brands go viral / sell online / rank #1 / get leads / scale fast — digitally.” The rotating phrase sits over an interactive network of connected dots — a nod to the graph line in the DN logo. Floating cards show real numbers, and a ticker lists every service.
02 — Services
Eleven services at a glance
Each card has its own icon, a short promise and tags. A soft highlight follows the cursor, the icon tilts on hover, and the whole card links to that service on the Services page.
03 — Case studies
Proof, stacked like cards
KIO Organics and Metro CRM appear as large cards that stick and stack as you scroll; the one underneath gently shrinks back. Each shows three hard numbers — 8 payment options, 6,000+ leads, 27,000+ follow-up notes.
04 — Process
Five steps, scrolled sideways
The section pins in place and the five steps — audit, strategy, create, launch, scale — slide past horizontally as you scroll down, with a progress line underneath. On phones it becomes a simple vertical list.
05 — Why us
A bento grid of reasons
Marketing plus technology in one team, 360° coverage, data-first reporting, 24/7 monitoring, no lock-ins and a dedicated account manager — with bars that grow as the section comes into view.
06 — Trust & footer
Testimonials, FAQs and a big sign-off
An auto-playing testimonial slider, six FAQs that open one at a time, a call-to-action block and a footer with every service and case study, ending in a giant DigitalNgage wordmark.
Motion design
Animation in every section — without getting in the way
Motion is built with GSAP and ScrollTrigger, with Lenis for smooth scrolling. All three libraries are bundled with the site, so nothing depends on an outside CDN.
01
Word-by-word headlines
Every heading rises into place one word at a time as it enters the screen.
02
Interactive network
A canvas of connected dots in the hero drifts and moves away from the cursor — and pauses when off screen.
03
Magnetic buttons & cursor
Buttons lean towards the pointer; a custom cursor grows over links and shows “View” or “Read” on cards.
04
Counting numbers
Stats count up from zero when they scroll into view, formatted the Indian way (6,000+).
05
Sticky stacking cards
Case study cards pin and stack; images move slightly slower than the page for depth.
06
Pinned sideways scroll
The process section scrolls horizontally, and marquees lean with the speed of your scroll.
Respectful by default
A short loading screen shows only on the first visit, pages open with a single animation, and visitors who turn on “reduce motion” on their device get a calm, fully static version of every page. If JavaScript is off, all content is still visible.
Inner pages
Every page a prospect looks for
Services, Work, About, Packages, Insights and Contact — plus two full case studies and a custom 404 page.
On mobile
Designed for the phone first
Every page was checked at phone width with no sideways scrolling. A full-screen menu opens from the corner, the services sidebar becomes a swipeable chip bar, and the process section turns into a simple vertical list.
Working with the client
Shaped by real feedback
After the first version went live, the client reviewed it on their own screen. Each round of feedback was turned around and re-checked on desktop and mobile.
Colour
“The gradient background doesn't look good — don't use gradients.”
What I did
Replaced every gradient and glow with solid brand orange, amber and violet on solid ink and paper.
Layout
“The website should be full screen — there's a gap on the left and right.”
What I did
Removed the fixed-width column so content spans the full screen, with a small comfortable margin.
Transitions
“Opening a page plays the animation twice — it should happen once.”
What I did
Removed the page-change curtain; each page now opens with a single entrance animation.
Services
“The service buttons should be on the left, not the top.”
What I did
Moved the 12 services into a sticky left sidebar with numbers and a consultation button.
Articles
“Articles look like mobile view on desktop.”
What I did
Built a three-column reading layout: contents list, a wider article and a sidebar with a CTA and related posts.
Favicon
“Use the DN logo as the favicon.”
What I did
Turned the DN mark into a transparent favicon in every size, plus a home-screen icon.
Under the hood
Simple to host, simple to update
The client hosts on standard shared hosting, so the site is plain HTML, CSS and JavaScript with one small PHP file — no Node server, no monthly platform fee.
One header, thirteen pages
- A small Python build script stitches shared parts into every page, so the menu and footer are always identical
- Each page sets its own title, description and active menu item
- The build also writes the sitemap
- Upload the public_html folder and the site is live
A lead form that holds up
- Always returns clean JSON, so the page can show success or a fallback
- Line breaks stripped from single-line fields to block email header injection
- Phone and email checked on the server; a hidden field quietly drops spam bots
- If sending fails, visitors are offered a phone number and email instead
Found on Google
- A real URL, title and description for every page
- Open Graph images for LinkedIn and Facebook previews
- Business details as structured data, plus sitemap and robots files
- Article headings have links, so sections can be shared directly
Fast and accessible
- Images load only when they come near the screen
- Compression and browser caching set in .htaccess
- Skip link, visible keyboard focus and labelled buttons
- Full support for the “reduce motion” setting
HTML5CSS3JavaScriptGSAP + ScrollTriggerLenisPHP 8Python build scriptHostinger
Results
What changed for DigitalNgage
PagesOne page, sections hidden and shown with JavaScript→13 real pages, each with its own URL and title
Services6 short cards→12 services, each with deliverables and its own enquiry button
ProofClient names only→Full KIO Organics and Metro CRM case studies with screenshots
ContentNo articles→An Insights section with three practical guides
Lead formBroken JSON reply, unchecked input→Validated and spam-filtered, with a phone and email fallback
FeelStatic template→Animated in every section, calm when motion is reduced
See it live
Scroll it yourself at digitalngage.com
Available for new projects
Have an idea? Let's make it move.
Find me
Doddaballapura, Bengaluru, Karnataka 561203
Studio in Bengaluru
3rd Phase, Apparel Park, Obadenahalli Industrial Area,Doddaballapura, Bengaluru, Karnataka 561203
● Satish Kumar — Creative Studio