Website Development — Vybe Media

Services

What we build.

🌐

01 — Marketing Sites

High-converting
landing pages &
brand sites.

Your homepage is your best salesperson. We design and build marketing sites that guide visitors from curiosity to conversion — fast, clear, and memorable.

↑40%

Avg. conversion lift

🛒

02 — E-Commerce

Stores built to sell,
not just display.

From product catalogue to checkout — we build e-commerce experiences optimised for conversion, mobile performance, and payment gateway integration.

WooCommerce Webflow Commerce Custom Cart Payment Gateway Inventory System Order Management

📰

03 — CMS Websites

You update it.
We build it right.

Content-managed sites where your team can add pages, posts, and media without touching code. Webflow CMS, WordPress, or headless — your choice.

Webflow CMS WordPress Headless CMS

⚙️

04 — Web Apps

Custom apps
that do real
work.

Booking systems, dashboards, member portals, admin panels — full-stack web applications built with Next.js, React, and Supabase.

Next.js React Supabase REST API

🔍

05 — SEO & Performance

Built to rank.
Built to load
fast.

Technical SEO baked into every build — structured data, Core Web Vitals optimisation, sitemap, canonical tags, and Lighthouse 90+ scores.

Avg. Lighthouse score

🔧

06 — Maintenance & Support

We don't
disappear
after launch.

Hosting management, plugin updates, security patches, content updates, uptime monitoring, and emergency support — we keep your site running.

Hosting Updates Security Uptime Monitor

Process

How we build.

Discovery & Scoping

We start by understanding your goals, audience, content requirements, integrations, and constraints. We write a detailed project scope before a single wireframe is drawn — no surprises mid-build.

Week 1Requirements DocTech Stack DecisionSitemap

UX Wireframes

Before any visual design, we map the user journey and page structure with detailed wireframes. Every content block, CTA, and navigation path is planned and approved by you first.

Week 1–2Low-Fi WireframesUser FlowMobile Layout

Visual Design

High-fidelity Figma designs — desktop and mobile — with your brand guidelines applied. Typography, colour system, component library, and animation specs all defined before build starts.

Week 2–3Figma MockupsComponent SystemMotion Spec

Development Build

We build in your chosen stack — Webflow for marketing sites, Next.js/React for web apps, WordPress for content-heavy builds. Clean code, semantic HTML, and performance-first from line one.

Week 3–6Frontend BuildCMS SetupAPI Integrations

QA & Testing

Full cross-browser and cross-device testing, form validation, payment flow testing, load speed checks, accessibility audit, and Lighthouse score verification before anything touches production.

Week 6–7Cross-Browser QALighthouse AuditAccessibility Check

Launch & Handover

DNS configuration, SSL setup, analytics integration, sitemap submission, and a 30-minute walkthrough so your team knows how to manage the CMS. Then 30 days of free post-launch support.

Launch DayDNS + SSLAnalytics SetupCMS Training30-Day Support

Webflow

Marketing sites
that move fast.

Webflow is our go-to for marketing sites, landing pages, and CMS-driven content. Pixel-perfect design, powerful CMS, and no-code updates for your team post-launch.

✓Pixel-perfect design translation from Figma
✓Webflow CMS for client-managed content
✓Logic & form integrations
✓E-commerce via Webflow Commerce
✓Webflow Optimize for A/B testing
✓Staff training on CMS post-launch

🌐 index.html
Webflow
1<!-- Webflow CMS Collection -->
2<section class="properties-grid">
3  <div class="w-dyn-list">
4    <div role="list" class="grid">
5      <div class="property-card">
6        <img src="{{featured-image}}">
7        <h3>{{name}}</h3>
8        <p>{{price}}</p>
9      </div>
10   </div>
11 </div>
12</section>

⚛️ page.tsx
Next.js · TypeScript
1import { Metadata } from 'next'
2
3export const metadata: Metadata = {
4  title: 'IOI Properties',
5  description: 'Premium living in Malaysia'
6}
7
8export default async function HomePage() {
9  const properties = await getProperties()
10
11  return (
12    <main>
13      <HeroSection featured={properties[0]} />
14      <PropertyGrid items={properties} />
15    </main>
16  )
17}

Next.js & React

Full-stack apps
with real power.

For web applications, dashboards, and complex data-driven sites — we build with Next.js, React, and TypeScript. Server components, API routes, auth, and database all under one roof.

✓Next.js App Router with Server Components
✓TypeScript throughout
✓Supabase / PostgreSQL database
✓Authentication (NextAuth, Clerk)
✓REST & GraphQL API integrations
✓Deployed to Vercel with CI/CD

WordPress

Content-heavy sites
your team controls.

When clients need editorial control, large content libraries, or existing WordPress ecosystems — we build clean, fast WordPress sites with custom themes and block editor workflows.

✓Custom theme development (no page builders)
✓Gutenberg block editor setup
✓WooCommerce integration
✓Performance optimisation (sub-2s load)
✓Security hardening & firewall setup
✓Staff training on content management

🔵 functions.php
WordPress · PHP
1// Register custom post type
2add_action('init', function() {
register_post_type('property', [
  'labels'  => [
    'name' => 'Properties',
  ],
  'public'       => true,
  'supports'     => [
    'title', 'editor',
    'thumbnail'
  ],
  'has_archive' => true,
  'rewrite'     => [
    'slug' => 'properties'
  ],
]);
17});

Portfolio

Sites we've
shipped.

Property developers, government agencies, banks, and brands — each built on the right stack for the job.

2026 — Live

IOI Properties

Full website redesign for one of Malaysia's largest property developers. Property listing CMS, virtual tour integration, lead capture system, and Webflow build with 98 Lighthouse score.

Webflow Corporate ⚡ 98 Score

ioi-properties.com.my

→

2025

Agro Bank

Corporate banking website with compliance-reviewed content management, multilingual CMS, and secure contact forms meeting Bank Negara guidelines.

WordPress Finance

agrobank.com.my

→

2025

CMA CGM Malaysia

Regional shipping partner portal with customer login, shipment tracking integration, and document management — built on Next.js with Supabase backend.

Next.js Corporate

cmacgm.com.my

→

2024

Jabatan Pembangunan Wanita

Government ministry website with bilingual CMS, event management system, and accessibility compliance meeting MAMPU web standards.

WordPress Government

jpw.gov.my

→

2024

PKNS E-Commerce

Full e-commerce build for Perbadanan Kemajuan Negeri Selangor's commercial division — product catalogue, cart, and FPX/Stripe checkout integration. 200+ SKUs managed via WordPress CMS.

WooCommerce E-Commerce Government

pkns.selangor.gov.my

→

2024

Affin Bank

Corporate landing pages and campaign microsites for product launches — fast-turnaround builds in Webflow with marketing team CMS access.

Webflow Finance

affinbank.com.my

→

Tech Stack

The tools
we build with.

🌐

Webflow

// Marketing Sites

Our primary tool for marketing sites. Visual-first, CMS-powered, and client-editable without code.

⚛️

Next.js

// Web Applications

The React framework for production. Server components, API routes, SSG/SSR, and edge deployments.

🔵

WordPress

// CMS Websites

Custom theme development for content-heavy sites. No bloated page builders — just clean, fast PHP.

🎭

Framer

// Animated Sites

For brands that want cinematic scroll animations and interactive storytelling baked into the design.

🟢

Supabase

// Database & Auth

Postgres backend, real-time subscriptions, row-level security, and built-in auth for web apps.

🔺

Vercel

// Deployment

Preview deployments, edge network, automatic HTTPS, and Git-connected CI/CD for every project.

🟠

Cloudflare

// CDN & Security

DNS, DDoS protection, WAF, and CDN caching for WordPress and static sites in Malaysia.

🎨

Figma

// Design

All design work starts in Figma — wireframes, high-fidelity mockups, design systems, and prototypes.

Performance

We build fast
by default.

Every site we ship is tested against Google's Core Web Vitals. These are our averages across all active projects.

Performance 98 / 100

// Core Web Vitals — LCP, FID, CLS all green

Accessibility 96 / 100

// WCAG 2.1 AA compliance, ARIA attributes, keyboard nav

Best Practices 100 / 100

// HTTPS, no vulnerable libraries, correct image formats

SEO 97 / 100

// Meta tags, structured data, sitemap, robots.txt

Page Load Speed < 1.8s

// Measured on 4G mobile — industry avg: 3.2s

Deliverables

What you get
with every build.

01 // design

Figma Design Files

Full high-fidelity Figma mockups for desktop and mobile — including your component library, colour system, and typography — yours to keep.

02 // code

Clean, Documented Code

All source code delivered in a Git repository — commented, organised, and ready for your team or any future developer to pick up and extend.

03 // cms

CMS Setup & Training

Your CMS is configured and your team is trained. We provide a short walkthrough recording and a written guide so updates are always self-sufficient.

04 // analytics

Analytics & Search Console

Google Analytics 4, Google Search Console, and sitemap submission all configured and verified at launch — so data flows from day one.

05 // perf

Lighthouse Audit Report

A full Lighthouse report at launch — Performance, Accessibility, Best Practices, SEO — with scores documented and any issues resolved before handover.

06 // support

30 Days Post-Launch Support

Bug fixes, browser quirks, copy tweaks, and minor adjustments — all included for 30 days after launch. No extra charge, no tickets, just a WhatsApp message.

Testimonials

From the clients
who live on our sites.

The new site loads in under 2 seconds and our enquiry rate tripled in the first month. Vybe understood exactly what a property developer needs from a website — not just aesthetics, but conversion.

Dato' Farid Hamzah

VP Corporate Affairs — IOI Properties

Our team can update content ourselves now — no more waiting on developers for every news post. Vybe set up the CMS so cleanly that our comms team learned it in an afternoon.

Puan Norashikin Idris

Director, Events — Jabatan Pembangunan Wanita

The partner portal Vybe built handles hundreds of shipment queries a day without a single issue. Clean code, great documentation, and the team actually explained what they built. Rare.

Jean-Marc Dupont

Regional IT Director — CMA CGM Malaysia

We had a 6-week deadline for a campaign microsite during Hari Raya. Vybe delivered in 4. Lighthouse 97, mobile-perfect, and the client loved it. That's the standard we needed.

Syafiq Rahmat

Brand Manager — Affin Bank

Pricing

Fixed-scope.
No surprises.

All projects are scoped upfront. You know the cost before a single line of code is written.

Starter

RM8,000

one-time

// Landing page or brochure site

✓Up to 5 pages
✓Webflow or WordPress
✓Mobile-responsive
✓Contact form + CMS setup
✓Lighthouse 90+ guaranteed
✓30 days post-launch support

Start a project

Growth Popular

RM18,000

one-time

// Full marketing site or CMS build

✓Up to 15 pages + CMS
✓Webflow, Next.js, or WP
✓Figma design files included
✓Animations & interactions
✓Analytics + Search Console
✓CMS training session

Start a project

Enterprise

Custom

// Web apps, portals & complex builds

✓Unlimited pages & features
✓Custom web application
✓Database & auth system
✓API integrations
✓Dedicated dev team
✓Ongoing maintenance SLA

Start a project

FAQ

Dev questions.

How long does a website take?+

A Starter brochure site takes 2–3 weeks from approved wireframes. A full Growth marketing site typically takes 4–6 weeks. Complex web applications are scoped individually but typically run 6–12 weeks. We always agree on a timeline before work begins.

Which platform should I choose — Webflow, Next.js, or WordPress?+

We recommend Webflow for most marketing sites and landing pages — it's fast to build, easy for your team to update, and produces excellent Lighthouse scores. WordPress suits large content libraries or existing WP ecosystems. Next.js is for web applications that need custom logic, user authentication, or complex data handling. We'll recommend the right one during discovery.

Do you provide hosting?+

We don't resell hosting as a margin business — we configure the right hosting for your project (Webflow Hosting, Vercel, or a Malaysian cloud provider) and hand it over to you. For clients who want managed hosting with monthly support, we offer maintenance retainers.

Can you redesign my existing website?+

Yes — redesigns are a significant part of our work. We review your existing site, identify structural and performance issues, migrate content, and rebuild on a better stack. Content migration is included for Starter and Growth projects.

Will I own my website after the project?+

Completely. You own all design files, source code, and CMS access. We transfer everything at handover. There are no ongoing fees to us unless you choose a maintenance retainer.

Do you handle domain and DNS setup?+

Yes — DNS configuration, SSL certificate setup, and domain connectivity are all included in every project. We also set up Cloudflare for security and CDN performance where appropriate.

What happens after the 30-day support period?+

After 30 days, you can either handle updates internally (we provide full documentation) or sign up for a monthly maintenance retainer — covering updates, backups, security monitoring, and priority support. Retainers start from RM 800/month.

Built to
convert.

What we build.

How we build.

Sites we've
shipped.

The tools
we build with.

We build fast
by default.

What you get
with every build.

From the clients
who live on our sites.

Fixed-scope.
No surprises.

Dev questions.

Let's build
something fast.

Built toconvert.

What we build.

How we build.

Sites we'veshipped.

The toolswe build with.

We build fastby default.

What you getwith every build.

From the clientswho live on our sites.

Fixed-scope.No surprises.

Dev questions.

Let's buildsomething fast.

Built to
convert.

Sites we've
shipped.

The tools
we build with.

We build fast
by default.

What you get
with every build.

From the clients
who live on our sites.

Fixed-scope.
No surprises.

Let's build
something fast.