Website yang Benar-benar
Bekerja untuk Bisnis Anda

Bukan template. Bukan drag-and-drop. Dibangun dari nol dengan kode bersih, desain yang mencerminkan brand Anda, dan performa yang dioptimalkan — dari Discovery Call sampai website live.

System Architecture

Struktur & Anatomi Layanan Website Custom

Setiap file blueprint (.fig) di bawah ini menjelaskan aspek, fitur, alur kerja, dan komitmen pengiriman dari awal kolaborasi hingga website Anda online.

s01_kenapa_nnx_studio_.fig
active_state: TRUE

Kenapa NNX Studio?

proposisi nilai & differensiator

Kode yang Anda Miliki Sepenuhnya

Source code diserahkan 100% setelah pelunasan. Tidak ada lock-in ke platform NNX, tidak ada biaya lisensi tahunan untuk tetap bisa menggunakan website Anda sendiri. Bebas dikembangkan oleh developer manapun.

Desain Sebelum Kode

Wireframe dan hi-fi mockup di Figma harus disetujui klien sebelum satu baris kode ditulis. Anda tahu persis tampilan website sebelum development dimulai. Tidak ada kejutan di akhir.

Kontrak Resmi, Bukan Janji Verbal

Setiap proyek dilindungi kontrak digital yang detail: scope, timeline, harga, kuota revisi, hak kepemilikan. Tidak ada pekerjaan yang dimulai tanpa kontrak yang ditandatangani kedua pihak.

Stack Modern Production-Grade

Next.js 15 + TypeScript + Tailwind CSS + Supabase — bukan WordPress atau page builder. Kode yang bisa di-scale, aman, dan mudah dimaintain. Performa diuji dan dilaporkan sebelum serah terima.

Update Progres Rutin

Link staging aktif sejak hari pertama development. Update progres via WhatsApp setiap 2–3 hari kerja. Anda tidak pernah bertanya-tanya progres sudah sampai mana.

Remote — Harga Lokal, Kualitas Global

Berbasis di Makassar, melayani seluruh Indonesia. Tidak ada biaya pertemuan tatap muka. Harga transparan, tidak ada biaya tersembunyi, tidak ada markup berdasarkan domisili klien.

s02_untuk_siapa_layanan_ini_.fig
active_state: FALSE

Untuk Siapa Layanan Ini?

kenali apakah NNX Studio cocok untuk kebutuhan Anda

UMKM & Bisnis Lokal

Ingin tampil profesional online, punya landing page atau company profile yang tidak terlihat seperti template gratisan. Butuh website yang mencerminkan brand dan bisa dipercaya calon pelanggan.

Startup & Produk Digital

Butuh MVP website atau landing page yang convert cepat, dengan potensi scale ke web app penuh. Prioritas kecepatan build tanpa mengorbankan kualitas kode untuk pengembangan lanjutan.

Kreator & Freelancer

Fotografer, desainer, videografer, konsultan yang butuh portofolio online berkelas. Website yang mencerminkan kualitas karya, bukan template generik yang sama seperti semua orang.

Klinik & Jasa Profesional

Dokter, klinik, pengacara, notaris, konsultan yang butuh website informatif dan terpercaya. Termasuk sistem booking, form appointment, dan konten layanan yang terstruktur.

Toko Online & E-Commerce

Bisnis yang butuh toko online custom — bukan Shopify atau Tokopedia. Kontrol penuh atas tampilan, checkout, dan integrasi payment gateway Indonesia (Midtrans/Xendit).

Institusi & Organisasi

Yayasan, sekolah, komunitas, LSM yang butuh website informatif dengan manajemen konten yang mudah dikelola tim internal tanpa kemampuan teknis.

Bukan untuk Anda jika: Anda butuh website dalam 1–2 hari tanpa proses desain, memiliki budget sangat terbatas dan tidak masalah dengan template builder, atau butuh website yang dikerjakan tanpa kontrak dan komunikasi terstruktur.
Sudah punya website lama? Redesign (bangun ulang visual) atau migrasi (pindah platform ke Next.js) tersedia sebagai proyek tersendiri.
s04_panduan_memilih_paket.fig
active_state: FALSE

Panduan Memilih Paket

jawab kebutuhan → tahu paket yang tepat untuk Anda

Saya butuh halaman promosi / iklan untuk satu produk atau event
1–2 halaman · tidak perlu CMS
Landing page sederhana, form, CTA, animasi dasar. Tidak perlu database atau login.
CONCEPT
Saya butuh website untuk profil bisnis / perusahaan saya
5–10 halaman · about, layanan, kontak
Company profile multi-halaman dengan desain brand, blog opsional, dan integrasi standar.
ARCHITECTURE
Saya butuh portofolio sebagai kreator / freelancer
galeri, about, kontak, blog opsional
Portfolio showcase dengan galeri filtered, blog, dan estetika yang kuat sesuai karya Anda.
ARCHITECTURE
Saya butuh toko online untuk jualan produk fisik/digital
produk, cart, checkout, payment
E-commerce custom dengan Midtrans/Xendit, manajemen stok, order management.
REALIZATION
Saya butuh aplikasi web dengan login pengguna
dashboard, role, database
Web app dengan autentikasi, database, admin panel, dan logika bisnis custom.
REALIZATION
Saya butuh website yang bisa saya kelola sendiri
CMS tanpa coding
Architecture + CMS headless (Sanity) atau Realization + Custom Admin Panel.
ARCHITECTURE+
Saya belum tahu butuh apa, masih bingung
pertama kali buat website
Discovery Call gratis. Ceritakan bisnis dan tujuan Anda — NNX akan bantu menentukan scope yang tepat dan efisien sesuai budget.
DISCOVERY CALL
Tips: Jika budget terbatas, mulai dari CONCEPT yang sudah mencakup kebutuhan paling mendasar. Website bisa dikembangkan ke tier lebih tinggi di proyek lanjutan — dengan kode yang sudah ada sebagai fondasi.
s05_yang_tidak_termasuk_dalam_layanan.fig
active_state: FALSE

Yang TIDAK Termasuk dalam Layanan

baca ini sebelum memesan — ekspektasi yang tepat dari awal

KONTEN & COPYWRITINGPenulisan teks konten (artikel, deskripsi, about) tidak termasuk. Klien wajib siapkan sendiri. Copywriting UI dasar tersedia sebagai add-on terpisah.
FOTO & VIDEOPemotretan produk, foto tim, dan videografi tidak termasuk. NNX menggunakan stock foto bebas lisensi sebagai alternatif jika klien tidak punya.
LOGO & BRAND IDENTITYPembuatan logo baru tidak termasuk. Klien wajib menyediakan logo. Jika belum ada, NNX dapat merujuk ke layanan branding terpisah.
IKLAN DIGITALPengelolaan kampanye Meta Ads / Google Ads / TikTok Ads tidak termasuk. Pemasangan pixel tracking disediakan, tetapi pengelolaan iklan bukan bagian layanan ini.
BIAYA HOSTING & DOMAINBiaya berulang hosting dan domain dibayar klien langsung ke platform (Vercel, Niagahoster, dll). NNX hanya bantu setup dan konfigurasi awal.
FITUR DI LUAR SCOPEFitur yang tidak ada di proposal tidak dikerjakan tanpa persetujuan scope tambahan dan biaya baru. Tidak ada asumsi atau kejutan di akhir.
MAINTENANCE OTOMATISSetelah periode post-launch support berakhir, pemeliharaan tidak otomatis berlanjut. Paket maintenance bulanan tersedia sebagai add-on.
JAMINAN RANKING SEOTechnical SEO dijamin benar, tapi peringkat di Google tidak bisa dijamin — bergantung konten, backlink, dan persaingan keyword di tangan klien.
DUPLIKASI DESAIN ORANG LAINMeniru desain website lain secara identik tidak dilakukan. Referensi digunakan sebagai inspirasi arah, bukan template untuk diduplikasi.
s06_fitur_desain_visual.fig
active_state: FALSE

Fitur Desain & Visual

semua aspek UI/UX, estetika, dan interaksi visual

WIREFRAME LO-FI
Sketsa struktur layout semua halaman sebelum desain detail. Menentukan hierarki konten, posisi elemen utama, navigasi. Disetujui klien sebelum lanjut ke hi-fi.
INCLUDED
HI-FI MOCKUP (FIGMA)
Desain final beresolusi tinggi di Figma untuk semua halaman and semua breakpoint (mobile + desktop). Klien melihat tampilan persis website sebelum kode ditulis.
INCLUDED
DESIGN SYSTEM
Token warna (CSS variables), skala tipografi H1–H6, spacing scale 4pt/8pt grid, radius, shadow, z-index. Konsisten di seluruh halaman dan komponen.
INCLUDED
CUSTOM BRANDING APPLY
Penerapan identitas brand klien secara penuh: logo semua format, palet warna brand, font brand, tone visual. Konsisten dari header hingga footer termasuk favicon dan meta OG image.
INCLUDED
RESPONSIVE DESIGN
Mobile-first. Sempurna di semua breakpoint: 320px, 480px, 768px, 1024px, 1280px, 1440px+. Tidak ada elemen terpotong, overflow, atau bertumpuk sembarangan di perangkat apapun.
INCLUDED
MICRO-ANIMATIONS
Hover effect pada tombol dan link, fade-in elemen, scale transform, color transition. CSS transitions + Framer Motion. Semua animasi menghormati prefers-reduced-motion.
INCLUDED
SCROLL-TRIGGERED ANIM
Elemen muncul/beranimasi saat di-scroll via Intersection Observer API. Staggered reveal, parallax section ringan, sticky element effects.
INCLUDED
VISUAL ATMOSPHERE
Efek visual latar sesuai brand: gradient mesh, noise texture, glassmorphism, dot-grid background, scanline overlay, radial glow. Dipilih yang sesuai — bukan semua dipakai sekaligus.
INCLUDED
LOADING STATE & SKELETON
Semua state loading ditangani: skeleton screen, shimmer animation, spinner. Tidak ada layar putih kosong saat data sedang diambil.
INCLUDED
ERROR PAGE CUSTOM
Halaman 404 (Not Found) dan 500 (Server Error) dengan desain sesuai brand, bukan error default Vercel/browser.
INCLUDED
ACCESSIBILITY (A11Y)
WCAG 2.1 Level AA: kontras warna 4.5:1+, keyboard navigation penuh, ARIA labels dan roles, focus styles visible, alt text semua gambar, semantic HTML.
INCLUDED
PAGE TRANSITIONS
Transisi halus antar halaman saat navigasi (fade/slide/morph). View Transitions API or Framer Motion AnimatePresence.
OPTIONAL
DARK / LIGHT MODE
Toggle dark/light mode dengan deteksi prefers-color-scheme. State di localStorage. Transisi smooth tanpa flash. Semua komponen punya varian warna kedua mode.
OPTIONAL
CUSTOM CURSOR
Cursor pengganti custom dengan efek trailing/magnetik pada elemen interaktif di desktop. Otomatis nonaktif di touchscreen.
OPTIONAL
CUSTOM ILLUSTRATION/ICON
Set ikon SVG custom dibuat dari nol sesuai brand (bukan library generik). Atau ilustrasi vektor ringan untuk section tertentu. Diserahkan sebagai file SVG terpisah.
ADD-ON
s07_fitur_teknis_development.fig
active_state: FALSE

Fitur Teknis & Development

arsitektur, rendering, database, autentikasi, infrastruktur kode

Next.js 15 App RouterTypeScriptTailwind CSSshadcn/uiFramer MotionSupabase (PostgreSQL)Prisma ORMNextAuth.js / Supabase AuthVercel (deployment)Resend (email)Cloudinary / Supabase StorageZod + React Hook Form
NEXT.JS APP ROUTER
Server Components (RSC), Client Components, Layouts bertingkat, API Route Handlers, Middleware, Server Actions. Turbopack untuk build lebih cepat. Versi 15 — framework produksi paling modern untuk React.
INCLUDED
RENDERING STRATEGY
Dipilih per halaman: SSG (statis), SSR (real-time), ISR (semi-dinamis dengan revalidasi berkala), CSR (interaksi berat). Strategi campuran dalam satu proyek sesuai kebutuhan setiap halaman.
INCLUDED
TYPESCRIPT STRICT
Seluruh codebase TypeScript strict. Type-safe dari schema DB → API response → props komponen → state. Interface dan type di folder /types. Mencegah bug runtime, mempermudah maintenance.
INCLUDED
ARSITEKTUR FOLDER
/app (routing), /components (UI), /lib (utilities), /hooks (custom hooks), /types (TypeScript types), /actions (Server Actions), /styles (CSS global), /public (static assets). Barrel exports untuk import bersih.
INCLUDED
DATABASE INTEGRATION
Supabase (PostgreSQL hosted) + Prisma ORM untuk type-safe queries. Schema design, migration terstruktur, relasi antar tabel, index performa, Row Level Security (RLS) Supabase.
OPTIONAL
REST API / ROUTE HANDLERS
API endpoint custom untuk form submission, data fetching, webhook receiver, integrasi third-party. Error handling proper, HTTP status codes benar, response format JSON konsisten.
OPTIONAL
AUTENTIKASI (AUTH)
Supabase Auth atau NextAuth.js v5. Provider: email+password, magic link, Google OAuth, GitHub OAuth. Session management (JWT/cookie), protected routes via middleware, role-based access control (RBAC), password reset via email.
OPTIONAL
USER ROLES & PERMISSION
Role bertingkat (admin/editor/user/guest). Akses berbeda per role ke halaman dan fitur. Implementasi via Next.js middleware + database role column + Supabase RLS.
OPTIONAL
FILE UPLOAD & STORAGE
Upload ke Supabase Storage atau Cloudinary. Validasi tipe dan ukuran file, resize gambar otomatis, konversi WebP, CDN delivery, signed URL untuk file privat.
OPTIONAL
EMAIL TRANSAKSIONAL
Email otomatis via Resend. Template HTML custom responsive sesuai brand. Dikirim untuk: konfirmasi pendaftaran, reset password, notifikasi form, konfirmasi pesanan, invoice PDF.
OPTIONAL
REALTIME FEATURES
Supabase Realtime (WebSocket): notifikasi live, counter realtime, status online/offline, dashboard metrics update otomatis, komentar langsung muncul tanpa reload.
OPTIONAL
AI / LLM INTEGRATION
Vercel AI SDK: chatbot berbasis konteks bisnis, summarization, generate teks, klasifikasi. Model: OpenAI GPT-4o atau Anthropic Claude. Streaming response untuk UX responsif.
ADD-ON
s08_fitur_konten_cms.fig
active_state: FALSE

Fitur Konten & CMS

manajemen konten mandiri tanpa coding

HEADLESS CMS
Sanity CMS atau Contentful. Edit teks, gambar, dan struktur konten sendiri melalui antarmuka visual tanpa menyentuh kode. Real-time preview sebelum publish.
OPTIONAL
CUSTOM ADMIN PANEL
Dashboard admin dibangun sendiri sesuai brand. CRUD data produk/layanan/artikel/pengguna dengan validasi dan konfirmasi aksi. Tidak bergantung platform CMS pihak ketiga.
OPTIONAL
BLOG / SISTEM ARTIKEL
Blog lengkap: rich text editor (heading, bold, italic, list, image embed, code block), kategori dan tag, slug URL custom, author profile, featured image, tanggal publish, estimasi baca, related posts, share buttons.
OPTIONAL
PORTFOLIO / GALERI
Grid galeri dengan filter kategori (tanpa reload), lightbox modal zoom, lazy loading, WebP otomatis. Mendukung gambar, video embed (YouTube/Vimeo), dan PDF viewer. Bisa dikelola via CMS.
OPTIONAL
FORM & SUBMISSION
Form kontak/pendaftaran/survei dengan validasi Zod (client + server). Submission → email notifikasi + database + webhook. Anti-spam via Cloudflare Turnstile atau reCAPTCHA v3.
INCLUDED
TESTIMONI / ULASAN
Bagian testimoni dengan moderasi admin (approve/reject). Foto reviewer, nama, posisi, perusahaan, rating bintang. Tampilan carousel atau grid.
OPTIONAL
MULTI-BAHASA (i18n)
next-intl: URL-based routing /id dan /en. Fallback bahasa default. Konten per bahasa di CMS atau file JSON. Language switcher UI terintegrasi.
ADD-ON
NEWSLETTER / SUBSCRIBE
Form subscribe: double opt-in via email, unsubscribe link. Sinkron otomatis ke Mailchimp / MailerLite / Brevo. Tag segmentasi berdasarkan sumber halaman.
ADD-ON
COPYWRITING DASAR
Teks placeholder/dasar untuk halaman utama (hero tagline, deskripsi layanan singkat, about pendek) jika klien tidak punya konten. Bukan artikel panjang. Bahasa Indonesia atau Inggris.
ADD-ON
s09_fitur_performa_seo.fig
active_state: FALSE

Fitur Performa & SEO

kecepatan, indexing, dan visibilitas di mesin pencari

CORE WEB VITALS
Target Lighthouse: Performance ≥ 90, Accessibility ≥ 95, Best Practices ≥ 90, SEO ≥ 95. LCP < 2.5s, INP < 100ms, CLS < 0.1. Diuji dan dilaporkan sebelum serah terima.
INCLUDED
IMAGE OPTIMIZATION
Next.js Image component: lazy loading otomatis, format WebP/AVIF (konversi otomatis), srcset responsive, blur placeholder. Aset di-serve dari Vercel Edge CDN.
INCLUDED
FONT OPTIMIZATION
next/font: preload otomatis, font-display swap, self-hosted (tidak ada request ke Google saat load), zero layout shift, no FOUT (flash of unstyled text).
INCLUDED
CODE SPLITTING & BUNDLE
Code splitting otomatis per route. Dynamic imports komponen berat. Tree-shaking. Minifikasi CSS/JS. Bundle analysis dengan @next/bundle-analyzer.
INCLUDED
CACHING STRATEGY
HTTP cache headers benar per tipe aset. ISR untuk konten semi-dinamis. CDN edge caching via Vercel. Stale-while-revalidate untuk data fetching.
INCLUDED
TECHNICAL SEO
Meta title + description per halaman (next/metadata), OG tags (judul/deskripsi/gambar), Twitter Card, canonical URL, robots meta, breadcrumb semantic navigation.
INCLUDED
STRUCTURED DATA (JSON-LD)
Schema markup sesuai jenis halaman: Organization, WebSite, Article, Product, BreadcrumbList, FAQPage, LocalBusiness. Potensi rich snippet di hasil Google.
INCLUDED
XML SITEMAP + ROBOTS.TXT
Sitemap XML otomatis via Next.js sitemap API. Update otomatis saat konten baru (untuk CMS). robots.txt dikonfigurasi benar — izinkan crawler publik, blokir admin/staging.
INCLUDED
GOOGLE SEARCH CONSOLE
Verifikasi domain, submit sitemap, monitoring indexing awal. Laporan diserahkan ke klien beserta panduan cara membaca data GSC.
INCLUDED
OG IMAGE DINAMIS
Open Graph image di-generate otomatis per halaman/artikel via Next.js ImageResponse API. Preview menarik dan sesuai brand saat link dibagikan di WA, Twitter, Telegram, Slack.
OPTIONAL
s10_fitur_keamanan_privasi.fig
active_state: FALSE

Fitur Keamanan & Privasi

perlindungan data pengguna dan sistem dari ancaman

SSL / HTTPS
SSL otomatis dan gratis via Vercel (Let's Encrypt). HTTP di-redirect ke HTTPS. HSTS header aktif.
INCLUDED
HTTP SECURITY HEADERS
Content-Security-Policy, X-Frame-Options: DENY, X-Content-Type-Options: nosniff, Referrer-Policy, Permissions-Policy. Dikonfigurasi di next.config.js. Target rating A di SecurityHeaders.com.
INCLUDED
INPUT VALIDATION
Dua lapisan: client-side (Zod + React Hook Form) dan server-side (validasi ulang sebelum ke database). Sanitasi HTML mencegah stored XSS.
INCLUDED
SQL INJECTION PREVENTION
Parameterized queries via Prisma ORM. Tidak ada string interpolation ke SQL. Supabase RLS sebagai lapisan keamanan database.
INCLUDED
CSRF PROTECTION
SameSite cookie attribute, origin header validation untuk request mutasi, token CSRF untuk form non-Server Actions.
INCLUDED
ENVIRONMENT VARIABLES
Semua credential sensitif di environment variables. Tidak pernah hardcoded atau di-commit ke Git. .env.example (tanpa nilai rahasia) disertakan sebagai panduan.
INCLUDED
DEPENDENCY SECURITY
npm audit sebelum serah terima. Package dengan vulnerability diperbarui atau diganti. Lock file disertakan untuk reprodusibilitas build.
INCLUDED
BACKUP DATABASE
Backup otomatis via Supabase (Point-in-Time Recovery). Source code dibackup di Git. Deployment history tersimpan di Vercel untuk rollback.
INCLUDED
RATE LIMITING
Limit request per IP pada endpoint sensitif (login, form, API publik). Upstash Redis atau middleware-based. Mencegah brute force dan spam bot.
OPTIONAL
COOKIE CONSENT / GDPR
Banner consent: jelaskan cookie yang digunakan, minta izin sebelum load analytics/pixel, opsi accept/reject/kelola. Tidak load tracking script sebelum izin diberikan.
OPTIONAL
s11_fitur_integrasi_api_third_party.fig
active_state: FALSE

Fitur Integrasi & API Third-Party

koneksi dengan layanan dan platform eksternal

GOOGLE ANALYTICS 4
Setup GA4: script via GTM atau next/script, event tracking custom (klik CTA, form submit, scroll depth, klik eksternal, video play), konversi goals, laporan audience dasar. Akses penuh diserahkan ke klien.
INCLUDED
VERCEL ANALYTICS
Analytics bawaan Vercel: page views, unique visitors, top pages, Core Web Vitals real-user data. Privasi-friendly (tanpa cookie consent). Gratis untuk website di Vercel.
INCLUDED
WHATSAPP INTEGRATION
Tombol WA float/sticky dengan pesan pre-filled custom (sumber halaman, nama layanan). Link WhatsApp Business atau multi-agent. Tracking klik via GTM.
INCLUDED
SOCIAL SHARE & EMBED
Share buttons (WA, Twitter/X, Facebook, Telegram, copy link) di artikel/produk. OG tags untuk preview sempurna di semua platform. Social links di footer dan header.
INCLUDED
GOOGLE TAG MANAGER
Setup GTM container, konfigurasi tag GA4, trigger setup. Klien bisa tambah/ubah tag sendiri di GTM tanpa developer.
OPTIONAL
META PIXEL (FB/IG)
Meta Pixel Standard Events + Conversions API (server-side untuk akurasi iOS 14+). Custom Audiences untuk retargeting. Klien tetap mengatur kampanye sendiri.
OPTIONAL
TIKTOK PIXEL
TikTok Pixel Standard Events, pengujian via TikTok Pixel Helper. Klien tetap mengatur TikTok Ads sendiri.
OPTIONAL
GOOGLE MAPS
Peta interaktif custom marker (warna/ikon sesuai brand), info window, multiple location markers (multi-cabang). Google Maps JS API atau iframe embed. Directions tersedia.
OPTIONAL
BOOKING / SCHEDULING
Embed Calendly / Cal.com, atau form booking custom dengan pemilihan slot, notifikasi email, konfirmasi dan reminder. Sinkronisasi Google Calendar opsional.
OPTIONAL
API CUSTOM / WEBHOOK
Integrasi ke API pihak ketiga manapun: marketplace, ERP, CRM, kasir, Shopify, Tokopedia. Webhook endpoint untuk event real-time dari layanan eksternal.
OPTIONAL
AI / LLM INTEGRATION
Vercel AI SDK: chatbot konteks bisnis, summarization, generate teks, klasifikasi. OpenAI GPT-4o atau Anthropic Claude. Streaming response.
ADD-ON
s12_fitur_e_commerce.fig
active_state: FALSE

Fitur E-Commerce

semua opsional — tersedia di paket Realization atau sebagai proyek tersendiri

KATALOG PRODUK
Galeri gambar multiple + slider, deskripsi rich text, varian (ukuran/warna/tipe) dengan stok per varian, harga normal dan harga coret, SKU, berat, kategori, tag, status stok.
OPTIONAL
FILTER & SORT PRODUK
Filter multi-dimensi: kategori, harga range slider, rating, stok, tag. Sort: terbaru, harga terendah/tertinggi, terlaris. Filter aktif sebagai tag yang bisa dihapus. URL-based filter untuk SEO.
OPTIONAL
SHOPPING CART
Keranjang persisten (localStorage untuk guest, database untuk login). Add/update/remove. Mini-cart dropdown di header. Subtotal dan estimasi ongkir real-time.
OPTIONAL
CHECKOUT FLOW
Multi-step: (1) info kontak + alamat → (2) pilih kurir + ongkir → (3) pilih pembayaran → (4) review → (5) konfirmasi. Guest checkout tersedia.
OPTIONAL
PAYMENT GATEWAY
Midtrans or Xendit. VA semua bank besar, QRIS, GoPay, OVO, ShopeePay, Dana, Kartu Kredit/Debit. Webhook konfirmasi otomatis. Invoice PDF dikirim via email.
OPTIONAL
ORDER MANAGEMENT
Panel admin: daftar pesanan + filter status, detail lengkap, update status + input resi, cetak invoice, export CSV, bulk action.
OPTIONAL
MANAJEMEN STOK
Tracking stok per produk dan varian real-time. Kurangi stok otomatis saat pesanan dikonfirmasi. Alert stok menipis (threshold bisa dikonfigurasi).
OPTIONAL
KALKULASI ONGKIR
RajaOngkir API: input berat + kota tujuan, tampil semua opsi jasa (JNE, JNT, SiCepat, Anteraja, Pos Indonesia) + harga + estimasi hari.
ADD-ON
KUPON & DISKON
Kode kupon: nominal/persentase, batas penggunaan total + per user, tanggal berlaku, minimum order. Flash sale countdown timer. Diskon tier.
ADD-ON
ULASAN PRODUK
Review dari pembeli terverifikasi (hanya bisa review jika pernah beli). Upload foto review (maks 3). Rating 1–5 bintang. Moderasi admin. Agregat rating.
ADD-ON
PRODUK DIGITAL
Jual ebook, template, preset, lisensi. Setelah pembayaran terkonfirmasi via webhook, signed URL download (dengan expiry time) dikirim otomatis via email.
ADD-ON
s13_fitur_pwa_mobile_web.fig
active_state: FALSE

Fitur PWA & Mobile Web

progressive web app, installability, pengalaman mobile

MOBILE-FIRST LAYOUT
Desain dimulai dari 320px lalu diperluas ke layar lebih besar. Touch target minimal 44×44px. Tidak ada konten yang hanya bisa diakses via hover di mobile.
INCLUDED
VIEWPORT OPTIMIZATION
Meta viewport benar. Mencegah zoom otomatis saat input difokus di iOS. Safe area inset untuk iPhone dengan notch/Dynamic Island. Scroll momentum natural di iOS.
INCLUDED
PWA MANIFEST
manifest.webmanifest lengkap: nama, warna tema, ikon semua ukuran (72–512px), display mode standalone/fullscreen, orientation, screenshots untuk install prompt.
OPTIONAL
PWA INSTALLABLE
Website bisa diinstal ke layar utama smartphone seperti app native. Install prompt otomatis. Setelah instal: tanpa address bar, splash screen, ikon di home screen.
OPTIONAL
SERVICE WORKER & OFFLINE
Cache aset statis di browser. Halaman utama bisa diakses offline setelah pernah dikunjungi. Strategi: Cache-First untuk statis, Network-First untuk API. Halaman offline custom.
OPTIONAL
MOBILE BOTTOM SHEET
Drawer dari bawah layar untuk filter, menu, detail, atau form. Gesture swipe untuk tutup. Snap points (setengah/penuh layar). Lebih natural dari modal popup di mobile.
OPTIONAL
TOUCH GESTURES
Swipe kiri/kanan di carousel/slider, swipe dismiss modal, pinch-to-zoom di galeri. Framer Motion gesture atau react-swipeable.
OPTIONAL
PUSH NOTIFICATION
Notifikasi push to browser/device tanpa app store. Pengguna diminta izin. Dapat dikirim meski website tidak terbuka. Web Push API + service worker + backend kirim notifikasi.
ADD-ON
s14_qa_browser_support.fig
active_state: FALSE

QA & Browser Support

pengujian kualitas menyeluruh sebelum serah terima

CROSS-BROWSER TESTING
Diuji di Chrome (latest), Firefox (latest), Safari (latest — macOS dan iOS), Edge (latest). Pemeriksaan visual, fungsional, dan interaksi. Bug browser-spesifik diperbaiki sebelum go-live.
INCLUDED
CROSS-DEVICE TESTING
Smartphone kecil (≤360px, Android), smartphone standar (375–390px, iPhone), tablet (768px, iPad), laptop (1024–1366px), desktop (1440px+). Chrome DevTools + perangkat fisik.
INCLUDED
FUNCTIONAL TESTING
Semua fungsi diuji: form submission + validasi, navigasi + link (tidak ada broken link), autentikasi, upload file, checkout + pembayaran (test mode), integrasi third-party.
INCLUDED
LIGHTHOUSE AUDIT
Laporan Lighthouse dijalankan di incognito untuk setiap halaman utama. Skor semua kategori dilaporkan. Masalah diperbaiki sebelum serah terima.
INCLUDED
BROKEN LINK CHECK
Semua link internal dan eksternal diperiksa. Tidak ada link ke halaman 404. Redirect dikonfigurasi jika ada URL yang berubah dari versi sebelumnya.
INCLUDED
FORM & EMAIL TESTING
Validasi field benar (required, format, panjang), pesan error jelas, email notifikasi terkirim dan masuk inbox (bukan spam), data tersimpan benar di database.
INCLUDED
SECURITY HEADER CHECK
Verifikasi via SecurityHeaders.com sebelum serah terima. Target rating minimal A. Hasil scan diserahkan sebagai dokumentasi.
INCLUDED
BROWSER DIDUKUNGChrome 100+, Firefox 100+, Safari 15+, Edge 100+ · IE11 tidak didukung
OS MOBILE DIDUKUNGiOS 14+ (Safari) · Android 8+ (Chrome)
STAGING LINKPreview URL Vercel aktif sejak hari pertama development — klien pantau progres real-time
s16_alur_kerja_10_tahap.fig
active_state: FALSE

Alur Kerja 10 Tahap

dari brief pertama hingga website live

01

Discovery Call

Sesi konsultasi gratis 30–60 menit via WhatsApp atau Google Meet. Topik: kebutuhan bisnis, jenis website, referensi desain, fitur yang diinginkan, target pengguna, deadline, estimasi budget. Tidak ada komitmen apapun.

DURASI: 1–2 hari · 100% GRATIS
02

Proposal & Quotation

Dokumen proposal via email/PDF: scope kerja terperinci per halaman, teknologi yang digunakan, timeline per fase, harga total + struktur pembayaran, dan syarat kerja. Klien bisa minta klarifikasi atau negosiasi sebelum setuju.

DURASI: 1–3 hari kerja setelah call
03

Kontrak Digital & Down Payment

Kontrak kerja digital dikirim untuk ditandatangani. Setelah setuju: invoice DP 50% dikirim. Proyek dijadwalkan dan dimulai setelah pembayaran DP terkonfirmasi. Tidak ada pengerjaan sebelum kontrak ditandatangani.

DURASI: 1 hari · PROYEK MASUK ANTRIAN
04

Pengumpulan Materi

Klien mengirimkan: logo (semua format), foto/gambar, draf teks konten per halaman, referensi desain tambahan, akses domain jika ada. Template brief konten diberikan. Timeline tidak berjalan sampai materi lengkap diterima.

DURASI: tergantung kesiapan klien
05

Fase Desain UI/UX

Wireframe lo-fi semua halaman → review klien → hi-fi mockup desktop + mobile di Figma → review + revisi (sesuai kuota). Desain disetujui tertulis sebelum development dimulai. Tidak ada kode ditulis sebelum desain final disetujui.

DURASI: 3–10 hari · TERGANTUNG JUMLAH HALAMAN
06

Fase Development

Setup repo Git + konfigurasi environment + deployment pipeline. Development komponen, halaman, dan fitur sesuai scope. Update progres via WhatsApp setiap 2–3 hari kerja. Link staging aktif sejak hari pertama — klien pantau real-time.

DURASI: 5–30+ hari kerja · SESUAI SCOPE
07

QA & Testing Internal

Sebelum diserahkan ke klien: cross-browser testing, cross-device testing, functional testing semua fitur, Lighthouse audit, broken link check, security headers check, form dan email testing. Bug ditemukan dan diperbaiki di tahap ini.

DURASI: 2–5 hari kerja
08

User Acceptance Testing (UAT)

Klien uji mandiri di staging berdasarkan checklist UAT yang diberikan. Semua feedback dikumpulkan dalam satu dokumen lengkap sekaligus (tidak bertahap). Perbaikan dilakukan sesuai kuota revisi dev yang disepakati.

DURASI: 2–5 hari (tergantung respons klien)
09

Serah Terima & Pelunasan

Setelah UAT disetujui tertulis: invoice pelunasan 50% dikirim. Setelah terkonfirmasi: (1) akses Git repo diserahkan, (2) file Figma di-share ke akun klien, (3) akses Vercel/Supabase/CMS dialihkan, (4) dokumentasi teknis dikirim.

DURASI: 1 hari setelah pelunasan terkonfirmasi
10

Deployment & Go-Live

Domain dihubungkan ke server (konfigurasi DNS). SSL aktif dan diverifikasi. Env vars production dikonfigurasi. DNS propagation dipantau (0–48 jam). Website live di domain klien. Vercel Analytics + Google Search Console diaktifkan. Post-launch support dimulai.

DURASI: 1–2 hari · WEBSITE LIVE
s17_deliverable_apa_yang_diterima_klien.fig
active_state: FALSE

Deliverable — Apa yang Diterima Klien

semua aset, akses, dan dokumen yang diserahkan setelah pelunasan

Source Code Lengkap

Akses Git repository (GitHub/GitLab). Kode bersih, terstruktur, berkomenter. Termasuk README.md panduan setup + deployment, .env.example (tanpa nilai rahasia), package.json semua dependencies.

File Desain Figma

Akses Editor ke file Figma: wireframe lo-fi, hi-fi mockup desktop + mobile, design system (token warna/tipografi/spacing/komponen), semua aset ikon dan ilustrasi (SVG).

Dokumentasi Teknis

Panduan setup lokal, panduan deployment Vercel dan VPS, daftar env variables + penjelasan, arsitektur database (ERD jika ada), panduan kelola konten di CMS.

Akses Semua Platform

Transfer owner/admin: Vercel project, Supabase project, CMS project (Sanity/Contentful), GA4 property, Google Search Console property, GTM container.

Laporan Lighthouse

Screenshot/PDF laporan Lighthouse semua halaman utama: skor Performance, Accessibility, Best Practices, SEO. Bukti kualitas teknis yang transparan dan terverifikasi sebelum serah terima.

Checklist QA

Dokumen checklist pengujian lengkap: browser dan device yang diuji, fungsional yang diverifikasi, catatan bug ditemukan + sudah diperbaiki, hasil security header scan (SecurityHeaders.com rating A).

Aset Gambar & Ikon

Semua aset gambar yang digunakan dalam format aslinya (SVG untuk ikon/ilustrasi, PNG/WebP untuk foto). Favicon set lengkap semua ukuran. Aset dikompres dan dioptimalkan untuk web.

s18_kebijakan_revisi.fig
active_state: FALSE

Kebijakan Revisi

kuota, definisi, apa yang masuk dan tidak masuk

KUOTA REVISIConcept: 2× desain + 1× dev · Architecture: 3× desain + 2× dev · Realization: 5× desain + 3× dev. Kuota desain dan development dihitung terpisah.
DEFINISI 1 PUTARANKlien kumpulkan semua feedback dalam satu dokumen/pesan lengkap sekaligus → dikerjakan sekaligus → dikembalikan. Feedback bertahap setelah putaran selesai = putaran baru.
YANG TERMASUK REVISIPerubahan warna, font, ukuran, jarak, teks, gambar, urutan section, posisi elemen, isi form (label/placeholder/field), tweak animasi/transisi — selama tidak mengubah scope awal.
YANG BUKAN REVISIPerubahan konsep desain fundamental setelah mockup disetujui, penambahan halaman baru, fitur baru di luar scope, perubahan teknologi, redesign ulang setelah development. Ini = scope tambahan dengan biaya baru.
BUG FIX VS REVISIBug fix (kesalahan developer: fungsi tidak bekerja, tampilan rusak di browser) = GRATIS, tidak memotong kuota. Revisi = perubahan atas keinginan klien = memotong kuota.
REVISI DI LUAR KUOTATersedia dengan biaya per putaran. Rate diinformasikan dan harus disetujui tertulis sebelum dikerjakan.
BATAS WAKTU KUOTAKuota berlaku sampai periode post-launch support berakhir. Setelah itu, revisi tidak gratis meskipun kuota belum habis.
s19_hak_kepemilikan_lisensi.fig
active_state: FALSE

Hak Kepemilikan & Lisensi

siapa memiliki apa setelah proyek selesai

KODE CUSTOMSetelah pelunasan: seluruh kode custom menjadi milik klien sepenuhnya. Bebas dimodifikasi, dijual, didistribusikan, dikembangkan siapapun tanpa izin tambahan dari NNX.
DESAIN FIGMAFile Figma dan semua aset visual custom menjadi milik klien sepenuhnya setelah pelunasan. NNX tidak menggunakan ulang desain tersebut untuk klien lain.
LIBRARY OPEN SOURCELibrary open source (Next.js, React, Tailwind, Prisma, dll) tunduk pada lisensi masing-masing (MIT, Apache 2.0) — bersifat permissive, tidak membatasi hak klien atas proyek.
FONTGoogle Fonts di bawah OFL (Open Font License) — gratis komersial. Font berbayar/brand khusus: klien bertanggung jawab miliki lisensi yang sesuai.
GAMBAR STOCKGambar stock (Unsplash/Pexels/Pixabay) tidak memerlukan atribusi tapi bukan milik klien. Untuk keperluan komersial jangka panjang, klien disarankan ganti dengan foto milik sendiri.
SEBELUM PELUNASANSebelum pembayaran lunas: kepemilikan semua kode dan aset ada pada NNX Studio. Deployment ke domain produksi tidak dilakukan sebelum pelunasan terkonfirmasi.
PORTOFOLIO NNXNNX berhak cantumkan proyek di portofolio (screenshots, URL, nama brand). Jika tidak diinginkan: NDA tersedia atas permintaan sebelum kontrak ditandatangani.
s20_hosting_domain.fig
active_state: FALSE

Hosting & Domain

opsi infrastruktur, siapa yang membayar, konfigurasi

Vercel (Rekomendasi)

Platform resmi Next.js. Hobby/free tier cukup untuk landing page dan company profile traffic normal. Pro plan $20/bulan untuk traffic lebih tinggi dan custom domain. CI/CD otomatis dari Git push. Edge network global.

VPS / Cloud Server

DigitalOcean, Hetzner, Niagahoster VPS untuk kontrol penuh. Diperlukan untuk web app dengan background jobs atau traffic sangat tinggi. Setup Nginx + PM2. Mulai $5–$20/bulan, dibayar klien langsung.

Domain & DNS

Domain dibeli atas nama klien. Registrar: Niagahoster, Domainesia, Namecheap, Cloudflare. DNS dikonfigurasi NNX saat deployment. Klien pegang akses penuh ke registrar. Mulai Rp100rb/tahun (.com/.id).

SIAPA YANG BAYARHosting dan domain = biaya klien langsung ke platform — tidak termasuk harga paket. NNX tidak ambil margin dari biaya infrastruktur.
KEPEMILIKAN AKUNSemua akun hosting dan domain harus atas nama atau dikontrol klien. NNX membantu setup, tidak menjadi pemilik infrastruktur klien.
CLOUDFLARE CDNOpsional: domain lewat Cloudflare untuk CDN gratis, DDoS protection, dan caching tambahan. Tidak mengubah hosting — hanya menambah lapisan keamanan di depan server.
s21_support_pemeliharaan.fig
active_state: FALSE

Support & Pemeliharaan

layanan setelah website go-live

POST-LAUNCH SUPPORT
Gratis setelah go-live: Concept 7 hari, Architecture 14 hari, Realization 30 hari. Cakupan: bug fix developer, pertanyaan penggunaan CMS/platform, minor adjustment tampilan, monitoring uptime. Respons 1×24 jam hari kerja.
GRATIS
MAINTENANCE BULANAN
Opsional setelah support habis: update dependency security (patch/minor), monitoring uptime, backup database manual bulanan, minor content update (maks 3 item/bulan), 1 jam development time untuk perbaikan kecil.
ADD-ON
PENGEMBANGAN LANJUTAN
Fitur baru, halaman baru, integrasi baru, atau redesign sebagian setelah proyek selesai: dipesan sebagai proyek terpisah atau hourly rate. Klien existing dapat prioritas antrian dan rate lebih baik.
ADD-ON
EMERGENCY FIX
Perbaikan darurat di luar jam kerja (website down, security breach). Tersedia dengan surcharge darurat. Target respons 4 jam. Tidak berlaku untuk masalah hosting/domain tanggung jawab klien.
ADD-ON
CHANNEL KOMUNIKASI
WhatsApp Business (utama), Google Meet (diskusi teknis), Email (dokumen formal). Aktif: Senin–Sabtu 09.00–21.00 WITA (GMT+8). Di luar jam ini dijawab hari kerja berikutnya.
INCLUDED
s22_ketentuan_pembayaran_kontrak.fig
active_state: FALSE

Ketentuan Pembayaran & Kontrak

struktur pembayaran, metode, dan perlindungan hukum kedua pihak

STRUKTUR PEMBAYARAN50% DP setelah kontrak ditandatangani → proyek dimulai. 50% Pelunasan setelah UAT disetujui → sebelum deployment ke production. Tidak ada pengerjaan sebelum DP terkonfirmasi.
METODE PEMBAYARANTransfer bank: BCA, BRI, BSI, Mandiri, BNI. E-wallet: GoPay, OVO, Dana. Invoice digital dikirim untuk setiap transaksi. Bukti transfer dikonfirmasi via WhatsApp.
KONTRAK KERJASetiap proyek: kontrak digital yang mencakup scope, timeline, harga, struktur pembayaran, kuota revisi, hak kepemilikan, kebijakan keterlambatan, kondisi penghentian, klausul kerahasiaan. Ditandatangani sebelum DP.
KETERLAMBATAN OLEH NNXJika keterlambatan dari NNX Studio (bukan materi belum dikirim klien, bukan perubahan scope, bukan force majeure): tidak ada biaya tambahan, waktu tambahan gratis.
KETERLAMBATAN OLEH KLIENJika klien terlambat kirim materi, tidak merespons review desain, atau ada perubahan scope: timeline disesuaikan. Tidak ada respons >14 hari tanpa pemberitahuan = proyek dijadwalkan ulang.
PEMBATALAN OLEH KLIENDP tidak dapat dikembalikan (sudah mencakup biaya waktu dan fase desain). Aset yang sudah diselesaikan diserahkan. Kode yang sudah dikerjakan tidak diserahkan karena belum ada pelunasan.
PENAMBAHAN SCOPEWajib: persetujuan tertulis + estimasi biaya tambahan + estimasi waktu tambahan. Pekerjaan dimulai setelah konfirmasi. Tidak ada asumsi, tidak ada pengerjaan tanpa persetujuan.
s23_checklist_siap_pesan.fig
active_state: FALSE

Checklist Siap Pesan

pastikan semua ini sebelum menghubungi NNX Studio — proyek berjalan lebih cepat

// Wajib disiapkan klien sebelum proyek dimulai
TUJUAN BISNIS
Apa yang ingin dicapai dengan website ini? (lebih banyak leads, toko online, tampil profesional, aplikasi internal, dll). Semakin jelas tujuan, semakin tepat scope yang dibuat.
LOGO SIAP
Logo dalam format SVG atau PNG resolusi tinggi (minimal 512px). Jika belum ada, proyek bisa dijadwalkan tetapi fase desain belum bisa dimulai sampai logo tersedia.
KONTEN TEKS
Draf teks untuk setiap halaman: tagline, deskripsi layanan/produk, about, dll. Tidak harus sempurna — bisa berupa poin-poin kasar yang nanti dirapikan. Template brief konten akan dikirimkan NNX.
FOTO / GAMBAR
Foto produk, tim, kantor, atau visual brand yang ingin digunakan. Format JPG/PNG, resolusi minimum 1200px. Jika belum ada, NNX akan menggunakan stock foto bebas lisensi sebagai placeholder.
REFERENSI DESAIN
2–5 website yang Anda sukai tampilannya (tidak harus di industri yang sama). Sebutkan apa yang Anda suka dari setiap referensi: warnanya, layoutnya, nuansanya, dll.
WARNA BRAND
Warna utama brand jika sudah ada (kode HEX/RGB atau nama warna). Jika belum punya, sampaikan suasana yang diinginkan: profesional, fun, mewah, minimal, berani, dll.
DOMAIN
Nama domain yang diinginkan (contoh: namabisnis.com) — cek ketersediaan di Niagahoster atau Namecheap. Jika sudah punya domain, siapkan akses ke panel registrar.
TARGET PENGGUNA
Siapa yang akan mengunjungi website ini? Usia, profesi, kebiasaan digital, platform yang sering digunakan (mobile atau desktop?). Informasi ini memengaruhi keputusan desain dan UX.
ESTIMASI BUDGET
Range budget yang disiapkan untuk proyek ini. Tidak perlu tepat — ini membantu NNX menyarankan scope yang realistis dan tidak membuang waktu kedua pihak dengan proposal yang tidak sesuai.
DEADLINE
Apakah ada tanggal target website harus live? (launching produk, event, kampanye marketing, dll). Deadline sangat memengaruhi prioritas pengerjaan dan bisa mempengaruhi harga jika sangat mendesak.
// Opsional — mempercepat proses jika sudah ada
BRAND GUIDE
Jika sudah punya brand guideline (font resmi, warna, aturan logo), kirimkan dokumennya. Ini sangat membantu konsistensi desain.
SITEMAP / STRUKTUR
Daftar halaman yang diinginkan beserta hirarki navigasinya. Contoh: Beranda → Tentang → Layanan (3 sub-halaman) → Portofolio → Blog → Kontak.
AKUN YANG ADA
Akses ke Google Analytics, Search Console, atau platform hosting yang sudah ada sebelumnya — untuk audit dan migrasi jika diperlukan.
KOMPETITOR
2–3 nama kompetitor atau bisnis serupa. Ini membantu NNX memahami positioning brand Anda dan menghindari desain yang terlalu mirip dengan kompetitor utama.
Tidak harus semua siap sekarang. Discovery Call bisa dilakukan meskipun belum semua item di atas tersedia. Justru lewat Discovery Call, NNX akan membantu Anda memprioritaskan mana yang paling mendesak disiapkan terlebih dahulu.
faq_pertanyaan_umum.fig
active_state: FALSE

Pertanyaan yang Paling Sering Diajukan

dari calon klien pertama kali hingga yang sudah berpengalaman

// mulai proyek Anda hari ini

Satu Pesan. Mulai dari Sini.

Discovery Call gratis, tidak ada komitmen, tidak ada biaya konsultasi. Ceritakan bisnis dan kebutuhan Anda — NNX akan bantu tentukan scope yang tepat, kirimkan proposal transparan, dan mulai membangun website yang benar-benar bekerja untuk bisnis Anda.

Biasanya dibalas dalam 1–3 jam · Senin–Sabtu 09.00–21.00 WITA

→ MULAI DISCOVERY CALL (GRATIS)BANTU SAYA PILIH PAKET
Source Code DiserahkanKontrak Digital ResmiDesain Disetujui Sebelum KodeLighthouse 90+No Lock-inRemote Seluruh Indonesia