Upgrade to Pro — share decks privately, control downloads, hide ads and more …

#006.Desain Arsitektur WEB

#006.Desain Arsitektur WEB

STRATEGI DESAIN WEB DALAM PERENCANAAN SITUS

Yanyan Sofiyan

March 25, 2019
Tweet

More Decks by Yanyan Sofiyan

Other Decks in Education

Transcript

  1. Pendahuluan  Tidak seperti yang terlihat di layar monitor, proses

    pembuatan situs web membutuhkan persyaratan yang sama dengan proses pembuatan suatu bangunan komersial tingkat tinggi. Agar berhasil, kedua proyek tersebut memerlukan keahlian arsitektur yang baik.  Layaknya bangunan fisik yang perlu dibangun dari dasar ke atas, pembuatan situs web juga membutuhkan cetak biru. Dan cetak biru tersebut terdiri dari enam tahapan.
  2. Tahap 2: Perencanaan  Membuat peta situs. Catat semua bidang

    topik utama situs web Anda, termasuk sub-topiknya, untuk mengembangkan sistem navigasi yang konsisten dan mudah untuk dipahami.  Memutuskan teknologi apa yang Anda butuhkan. Menentukan apa saja yang Anda butuhkan, seperti formulir interaktif, aplikasi flash dan/atau sistem manajemen konten (CMS).  Menentukan resolusi tampilan yang bisa diterima. Seiring dengan peningkatan pemakaian perangkat mobile, Anda mungkin ingin mempertimbangkan rancangan yang bersifat responsif. Pendekatan ini memungkinkan sebuah situs web menyesuaikan tampilannya pada berbagai resolusi layar, seperti desktop, tablet PC, atau smartphone.
  3. Tahap 2: Perencanaan  Membuat mock-up. Luangkan waktu untuk mengatur

    tata letak halaman berdasarkan pola rancangan dasar yang ada. Langkah ini akan membantu Anda memvisualisasikan rancangan dan memberikan kerangka kerja bagi situs web Anda.  Rencanakan konten Anda. Mengetahui apa saja yang ingin Anda komunikasikan dan berapa banyak konten yang Anda miliki akan membantu memandu proses perancangan.
  4. Tahap 3. Rancangan  Wireframe. adalah blueprint website Anda. Ini

    adalah hal yang membantu memberikan website Anda struktur visual. Wireframe sendiri harus memiliki hal-hal di bawah ini: • Letak Elemen • Hirarki Informasi • Interaktif  Perencanaan Konten  Search Engine Optimisation  Style Tiles https://www.behance.net/gallery/8630783/WebSoco-Layout-Design
  5. Style Title  Style adalah kumpulan desain untuk visual branding

    sebuah web yang biasa berisi font, warna, dan element interface yang akan membantu menyampaikan identitas website ini kepada pengunjung website.  Style tiles juga biasa sesuai dengan diskusi client.  Elemennya biasa terdiri dari logo, typography, warna, dan voice brand itu sendiri. Berikut ini adalah contoh Style Tiles. • Visualisasi Konsep • Menjaga konsistensi
  6. Tahap 4. Pengembangan  Setelah rancangan dilakukan dan disetujui, maka

    proses pembuatan situs web bisa dimulai. Perancang/pengembang akan mengambil semua elemen grafis individu dari prototipe dan menggunakannya untuk membuat situs web yang fungsional. Elemen interaktif seperti formulir kontak, animasi flash dll. akan diimplementasikan pada tahapan ini.
  7. Tahap 5: Pengujian, Pengiriman, dan Peluncuran  Pengembang situs web

    akan menguji situs web, dari kelengkapan fungsinya hingga masalah kompatibilitas. Selain itu, pengembang akan memastikan bahwa semua kode pemrograman yang ditulis untuk validasi situs web Anda memenuhi standar pemrograman web yang ada saat ini.
  8. Tahap 6: Pemeliharaan  Pengembangan situs web tidak berhenti pada

    tanggal peluncuran semata. Layaknya bangunan fisik, Anda harus mengambil langkah-langkah pemeliharaan untuk memastikan bahwa situs web Anda aman dan berjalan secara optimal.
  9. SOAL UTS DESAIN ARSITEKTUR WEB 1. Silahkan buat sebuah website

    di https://id.wordpress.com 2. Kerjakan Seceara berkelompok 3. Buat domain name dengan nama kelompok contoh : kelompok1.wordpress.com 4. Atur dan desain web anda semenarik mungkin, Dengen ketentuan sebagai berikut:  Design:  Estetika: Warna, Layout, Elemen, Tipografi  Informasi: Isi (Konten), Penyampaian Pesan, Pembentukan Citra  Usefulness:  Utility: Fungsionalitas, Aksesibilitas, teknologi yang tepat  Usability: Kemudahan penggunaan, waktu belajar, kecepatan kinerja, tingkat kesalahan, daya ingat dan kepuasan subyektif 3. Berikan menu anatara lain minimal harus ada menu Profil, galeri, dan berita 4. Uploads link web ke halaman form UTS di E-Learning