Static prototype · Phase 2 Modern SaaS Technical Mindmap

1234567.id

Prototype awal mindmap visual untuk memetakan domain, website, brand, konten, fitur, stack teknis, dan roadmap project. Fokusnya masih statis: layout sudah disusun, gaya visual sudah dibentuk, dan struktur informasi sudah bisa dipakai sebagai fondasi sebelum lanjut ke versi interaktif.

Domain & DNS Website Brand Content Features Technical Stack Roadmap
Current status Blueprint ready · Static prototype live · HTTPS active
Prototype goal Memvalidasi struktur node, visual hierarchy, dan arah UX sebelum interaktif.
Next phase Responsive polish, data JSON, lalu expand/collapse + detail panel.
◎

1234567.id

Main concept map · clean, modern, educational

Node pusat untuk menyatukan arah project: domain, landing page, identitas brand, struktur konten, fitur produk, infrastruktur, dan tahapan implementasi.

Prototype Mindmap HTTPS live Desktop-first
◌

Domain & DNS

Fondasi akses, trust, dan routing domain
  • A record untuk 1234567.id dan www sudah menuju server aktif.
  • SSL Let's Encrypt sudah terbit dan auto-renew aktif.
  • Canonical redirect diarahkan ke https://1234567.id.
A record SSL Redirect
◫

Website

Landing page, narrative, dan CTA utama
  • Prototype ini menjadi landing visual awal untuk menguji layout dan hierarchy.
  • Section hero, node map, dan roadmap sudah tersusun untuk desktop dan mobile.
  • Berikutnya bisa ditambah CTA, section detail, atau mode presentasi.
Hero section CTA-ready Responsive
◍

Brand

Sistem visual yang lembut tapi tetap teknis
  • Palet pastel, card rounded, shadow halus, dan typography sans modern.
  • Nuansanya dokumentatif, rapi, dan friendly untuk topik teknis.
  • Node dibuat seperti SaaS infographics, bukan bubble mindmap tradisional.
Pastel palette Rounded cards Inter style
◧

Content

Narasi yang menjelaskan value dan struktur informasi
  • Bisa berkembang ke home copy, FAQ, use case, update, dan dokumentasi.
  • Mindmap ini membantu menyusun urutan cerita sebelum copy final ditulis.
  • Cocok untuk presentasi internal maupun validasi konsep awal.
FAQ Use cases Docs
◈

Features

Arah menuju mindmap yang interaktif
  • Tahap berikutnya: expand/collapse, hover detail, dan panel detail per node.
  • Pencarian node, filter kategori, dan shareable links bisa masuk fase lanjutan.
  • Export PNG/SVG/PDF disiapkan setelah struktur data stabil.
Expand / collapse Search Export
◔

Technical Stack

Implementasi ringan sekarang, scalable nanti
  • Versi ini cukup dengan HTML/CSS native agar cepat live dan mudah divalidasi.
  • Connector memakai SVG custom agar style lebih bebas dan rapi.
  • Versi interaktif nanti bisa pindah ke JSON-driven + React Flow atau custom JS.
HTML/CSS SVG JSON later
↗

Roadmap

Implementasi bertahap dari visual ke produk
1
BlueprintKonsep visual, palet, struktur node, dan prioritas fitur sudah didefinisikan.
2
Static prototypeHalaman ini memvalidasi layout desktop, gaya card, dan susunan cabang utama.
3
Responsive polishPenyempurnaan tablet/mobile dan penyusunan spacing/connector lebih presisi.
4
Interactive modeExpand/collapse, hover states, detail panel, dan pencarian node.
5
Data-driven contentStruktur node dipindah ke JSON agar mudah dikelola dan dikembangkan.

Ini masih prototype statis sesuai blueprint. Langkah berikut paling masuk akal: pecah isi node ke data JSON, lalu tambahkan interaksi ringan tanpa mengubah gaya visual utama.