-
1.52 kB
initial commit
-
209 Bytes
oke sekarang revisi dan tambahkan lebih lengkap, Layout & Struktur: Sangat Terstruktur (Grid-based): Semua elemen tertata rapi dalam sebuah grid yang tidak terlihat. Tidak ada yang melayang secara acak. Pemisahan Section Jelas: Setiap bagian (Contoh: "Portofolio", "Review Klien", "Tahapan Layanan") dipisahkan dengan jelas menggunakan latar belakang yang berbeda (putih bergantian dengan blok warna solid hijau). Banyak Ruang Kosong (Whitespace): Desainnya tidak terasa sesak. Ada jarak yang cukup antar elemen, membuat setiap informasi mudah dicerna. Hierarki Visual Kuat: Pengguna tahu persis harus melihat ke mana terlebih dahulu, berkat penggunaan ukuran font, ketebalan, dan warna yang berbeda. Kombinasi Simetris & Asimetris: Sebagian besar layout berpusat (simetris), namun ada bagian seperti "Tahapan Layanan Jasa" yang menggunakan layout gambar di samping teks (asimetris) untuk menciptakan dinamika. Tipografi: Font: Menggunakan jenis font Sans-Serif yang modern, bersih, dan geometris (kemungkinan besar Poppins, Montserrat, atau sejenisnya). Font ini memberikan kesan profesional dan mudah dibaca di layar digital. Hierarki Teks: Judul Utama Section (H2): Ukuran besar, tebal (font-weight: 700 atau bold). Sub-Judul (H3): Ukuran sedang, tebal. Digunakan untuk judul item di dalam section (contoh: "Desain & Gambar Lengkap"). Teks Paragraf (p): Ukuran standar (sekitar 16px), font-weight: 400 (regular), dengan spasi antar baris (line-height) yang nyaman (sekitar 1.6em) untuk keterbacaan. Trik Tipografi: Seringkali dalam satu judul, ada dua font-weight yang berbeda. Contoh: "Review Klien Jasa" (regular) dan "Arsitek Hijau" (bold). Ini adalah detail penting yang menambah sentuhan profesional. Warna (Brand Saat Ini): Warna Primer: Putih (#FFFFFF) sebagai latar belakang utama. Warna Aksen: Hijau Tua (Deep Green) yang menjadi identitas brand. Digunakan untuk tombol, ikon, latar belakang section, dan menyorot kata kunci pada judul. Warna Teks: Abu-abu sangat tua/Hitam (#212529 atau sejenisnya) untuk teks utama agar nyaman dibaca. Warna Teks di Aksen: Putih (#FFFFFF) untuk memastikan kontras tinggi saat berada di atas latar belakang hijau. Warna Footer: Hitam pekat (#000000 atau mendekati) untuk bagian footer. Prompt Desain Detail untuk Website MOBANGUN! (Gaya Arsitek Hijau dengan Warna Kuning) Berikut adalah prompt yang bisa Anda berikan kepada tim desain/developer. 1. Tujuan & Filosofi Desain "Buatkan desain website untuk jasa arsitek MOBANGUN! dengan meniru secara presisi tata letak (layout), struktur, dan gaya visual dari website arsitekhijau.com (sesuai gambar terlampir). Tujuannya adalah untuk menciptakan tampilan yang bersih, profesional, sangat terpercaya, dan mudah dinavigasi. Namun, kita akan mengganti identitas warna hijau dengan palet warna baru yang berpusat pada warna Kuning yang hangat, energik, dan modern." 2. Layout & Struktur Halaman Sistem Grid: Terapkan sistem grid yang ketat (misalnya 12-kolom Bootstrap) untuk memastikan semua elemen (teks, gambar, tombol) selaras dengan rapi. Struktur Section: Gunakan pendekatan "blok" atau "section" yang jelas. Latar belakang harus bergantian antara Putih (#FFFFFF) dan Kuning Utama (#FFC107) untuk menciptakan ritme visual yang dinamis. Ruang Kosong (Whitespace): Berikan ruang napas yang lega di sekitar semua elemen. Jangan membuat halaman terasa sesak. Prioritaskan kejelasan di atas kepadatan informasi. Alignment: Sebagian besar konten teks dan judul di-set rata tengah (center-aligned) di dalam section-nya. Untuk bagian yang memadukan gambar dan teks (seperti "Tahapan Layanan"), gunakan alignment rata kiri untuk teks. 3. Palet Warna (Color Brand) - Tema "Modern Yellow" Kuning Utama (Primary Accent): #FFC107 (Warna Amber/Kuning Emas). Penggunaan: Untuk semua tombol Call-to-Action (CTA), latar belakang blok section utama, ikon, dan untuk menyorot kata kunci pada judul. Abu-abu Tua (Main Text): #333333 (Charcoal Gray). Penggunaan: Untuk semua teks paragraf dan sebagian besar judul agar nyaman dibaca dan tidak sekeras hitam pekat. Putih (Primary Background): #FFFFFF. Penggunaan: Sebagai warna latar belakang utama untuk sebagian besar section. Putih Gading (Text on Accent): #FFFFFF atau sedikit off-white seperti #FDFDFD. Penggunaan: Untuk semua teks yang berada di atas latar belakang Kuning Utama agar kontras maksimal. Hitam Footer (Footer Background): #1A1A1A (Off-Black/Sangat Gelap). Penggunaan: Khusus untuk latar belakang bagian Footer paling bawah. 4. Tipografi (Typography) Font Family: Gunakan Poppins dari Google Fonts untuk semua teks. Hierarki & Detail: H1 (Judul Hero): Font-size: 48px, Font-weight: 700 (Bold). H2 (Judul Section): Font-size: 36px, Font-weight: 700 (Bold). Terapkan teknik "mixed-weight" jika memungkinkan (misal: "Layanan Profesional" font-weight: 400, "Kami" font-weight: 700). H3 (Sub-judul item): Font-size: 20px, Font-weight: 600 (Semi-Bold). Paragraf (P): Font-size: 16px, Font-weight: 400 (Regular), Line-height: 1.7em. Color: #333333. Teks Tombol: Font-size: 16px, Font-weight: 600 (Semi-Bold), Letter-spacing: 0.5px. 5. Elemen & Komponen Spesifik Tombol (Buttons): Tombol Utama: Latar belakang solid Kuning Utama (#FFC107), teks warna Putih Gading. Sedikit membulat di sudut (border-radius: 4px). Ada efek hover (saat kursor di atasnya), warna menjadi sedikit lebih gelap. Tombol Sekunder: Latar belakang transparan dengan border solid 1px warna Kuning Utama (#FFC107). Teks berwarna Kuning Utama. Ikon: Gunakan set ikon gaya line art (garis tipis), minimalis, dan konsisten. Warna ikon adalah Kuning Utama (#FFC107). Formulir Kontak: Desain input field yang bersih: border abu-abu muda, label di atas field. Saat field aktif (diklik), border berubah warna menjadi Kuning Utama. Tombol "Kirim Pesan" menggunakan gaya Tombol Utama. Galeri Portofolio: Gunakan layout grid masonry atau grid standar yang rapi. Berikan jarak (gap) yang konsisten antar gambar. Saat kursor di atas gambar, muncul overlay semi-transparan berwarna gelap dengan judul proyek di atasnya. Footer: Latar belakang Hitam Footer (#1A1A1A). Teks menggunakan warna putih atau abu-abu sangat muda. Layout multi-kolom yang terorganisir (Profil, Navigasi, Kontak, Media Sosial). Ikon media sosial berwarna putih dan simpel. - Initial Deployment
-
34 kB
jelek!!! https://arsitekhijau.com/wp-content/uploads/V2-3-1-8-min-2.jpg image heronya pakai ini aja deh, - Follow Up Deployment
-
388 Bytes
initial commit